/* Life V322 — desktop-only professional workspace.
   IMPORTANT: every rule is restricted to non-Capacitor viewports >= 1024px.
   The Android/mobile UI and mobile browser breakpoints are intentionally untouched. */

@media (min-width: 1024px) {
  html:not(.capacitor-android) {
    --desk-sidebar: 256px;
    --desk-header: 68px;
    --desk-canvas: #f3f6fa;
    --desk-surface: #ffffff;
    --desk-surface-2: #f8fafc;
    --desk-border: #dfe6ef;
    --desk-border-strong: #cbd5e1;
    --desk-text: #172033;
    --desk-muted: #6b778c;
    --desk-accent: #2563eb;
    --desk-accent-soft: #eef4ff;
    --desk-success: #0f9f6e;
    --desk-danger: #dc3545;
    --desk-warning: #d97706;
    --desk-radius-lg: 18px;
    --desk-radius-md: 13px;
    --desk-radius-sm: 10px;
    --desk-shadow: 0 1px 2px rgba(15,23,42,.04), 0 10px 28px rgba(15,23,42,.055);
    --desk-shadow-pop: 0 18px 50px rgba(15,23,42,.16);
    --desktop-sidebar-w: var(--desk-sidebar);
    --desktop-header-h: var(--desk-header);
    --desktop-content-max: 1680px;
  }

  html:not(.capacitor-android),
  html:not(.capacitor-android) body {
    background: var(--desk-canvas) !important;
  }

  html:not(.capacitor-android) body.app-authed {
    display: block !important;
    min-width: 1024px !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
    color: var(--desk-text) !important;
    background: var(--desk-canvas) !important;
  }

  /* ───────────────────── App shell / navigation ───────────────────── */
  html:not(.capacitor-android) body.app-authed #app-sidebar.app-sidebar,
  html:not(.capacitor-android) body.app-authed #app-sidebar.app-sidebar.open,
  html:not(.capacitor-android) body.app-authed #app-sidebar.app-sidebar:not(.open) {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: var(--desk-sidebar) !important;
    min-width: var(--desk-sidebar) !important;
    max-width: var(--desk-sidebar) !important;
    height: 100dvh !important;
    padding: 14px 12px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: hidden !important;
    background: var(--desk-surface) !important;
    border: 0 !important;
    border-right: 1px solid var(--desk-border) !important;
    box-shadow: none !important;
    z-index: 5100 !important;
  }

  html:not(.capacitor-android) body.app-authed #sidebar-overlay,
  html:not(.capacitor-android) body.app-authed #mobile-menu-btn,
  html:not(.capacitor-android) body.app-authed .sidebar-close-btn,
  html:not(.capacitor-android) body.app-authed #global-floating-menu-btn {
    display: none !important;
  }

  html:not(.capacitor-android) body.app-authed .sidebar-header {
    min-height: 50px !important;
    padding: 4px 6px 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: transparent !important;
    border: 0 !important;
  }
  html:not(.capacitor-android) body.app-authed .sidebar-brand {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: var(--desk-text) !important;
    font-size: 1.04rem !important;
    font-weight: 850 !important;
    letter-spacing: -.025em !important;
  }
  html:not(.capacitor-android) body.app-authed .sidebar-brand > .material-symbols-rounded {
    width: 34px !important;
    height: 34px !important;
    max-width: 34px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    background: #111827 !important;
    color: #fff !important;
    font-size: 20px !important;
  }
  html:not(.capacitor-android) body.app-authed .sidebar-header-actions {
    margin-left: auto !important;
    gap: 4px !important;
  }
  html:not(.capacitor-android) body.app-authed .sidebar-header-actions .btn-icon {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: var(--desk-muted) !important;
    box-shadow: none !important;
  }
  html:not(.capacitor-android) body.app-authed .sidebar-header-actions .btn-icon:hover {
    background: var(--desk-surface-2) !important;
    border-color: var(--desk-border) !important;
    color: var(--desk-text) !important;
  }

  html:not(.capacitor-android) body.app-authed .sidebar-user {
    margin: 0 6px 10px !important;
    padding: 9px 10px !important;
    min-height: 0 !important;
    border: 1px solid var(--desk-border) !important;
    border-radius: 11px !important;
    background: var(--desk-surface-2) !important;
  }
  html:not(.capacitor-android) body.app-authed .sidebar-user-name {
    color: var(--desk-text) !important;
    font-size: .79rem !important;
    font-weight: 750 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html:not(.capacitor-android) body.app-authed .sidebar-cards {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
    padding: 0 6px 12px !important;
  }
  html:not(.capacitor-android) body.app-authed .sidebar-card {
    min-width: 0 !important;
    min-height: 78px !important;
    padding: 10px !important;
    border: 1px solid var(--desk-border) !important;
    border-radius: 12px !important;
    background: var(--desk-surface) !important;
    box-shadow: none !important;
    transition: border-color .16s ease, background .16s ease, transform .16s ease !important;
  }
  html:not(.capacitor-android) body.app-authed .sidebar-card:hover {
    border-color: #b9c7d8 !important;
    background: #fbfcfe !important;
    transform: translateY(-1px) !important;
  }
  html:not(.capacitor-android) body.app-authed .sidebar-card-head {
    gap: 5px !important;
    align-items: center !important;
  }
  html:not(.capacitor-android) body.app-authed .sidebar-card-head .material-symbols-rounded {
    font-size: 16px !important;
  }
  html:not(.capacitor-android) body.app-authed .sidebar-card-label {
    font-size: .62rem !important;
    line-height: 1.15 !important;
    color: var(--desk-muted) !important;
  }
  html:not(.capacitor-android) body.app-authed .sidebar-spent-value {
    margin-top: 7px !important;
    font-size: .92rem !important;
    font-weight: 850 !important;
    color: var(--desk-text) !important;
  }

  html:not(.capacitor-android) body.app-authed .sidebar-spacer { display: none !important; }
  html:not(.capacitor-android) body.app-authed .sidebar-nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 6px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    overflow: auto !important;
    background: transparent !important;
  }
  html:not(.capacitor-android) body.app-authed .sidebar-nav::before {
    content: "Workspace" !important;
    display: block !important;
    padding: 2px 10px 7px !important;
    color: #94a3b8 !important;
    font-size: .62rem !important;
    font-weight: 850 !important;
    letter-spacing: .11em !important;
    text-transform: uppercase !important;
  }
  html:not(.capacitor-android) body.app-authed .sidebar-item {
    width: 100% !important;
    min-height: 39px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #49576a !important;
    font-size: .82rem !important;
    font-weight: 690 !important;
    cursor: pointer !important;
    transition: color .14s ease, background .14s ease, border-color .14s ease !important;
  }
  html:not(.capacitor-android) body.app-authed .sidebar-item > .material-symbols-rounded {
    width: 20px !important;
    max-width: 20px !important;
    font-size: 19px !important;
    color: #7b899c !important;
  }
  html:not(.capacitor-android) body.app-authed .sidebar-item:hover {
    background: #f5f7fa !important;
    border-color: #eef2f6 !important;
    color: var(--desk-text) !important;
  }
  html:not(.capacitor-android) body.app-authed .sidebar-item.active,
  html:not(.capacitor-android) body.app-authed .sidebar-nav .sidebar-item.active {
    background: var(--desk-accent-soft) !important;
    border-color: #dbe7ff !important;
    color: #174ea6 !important;
    box-shadow: inset 3px 0 0 var(--desk-accent) !important;
  }
  html:not(.capacitor-android) body.app-authed .sidebar-item.active > .material-symbols-rounded,
  html:not(.capacitor-android) body.app-authed .sidebar-nav .sidebar-item.active > .material-symbols-rounded {
    color: var(--desk-accent) !important;
  }
  html:not(.capacitor-android) body.app-authed .sidebar-footer {
    padding: 8px 6px 0 !important;
    background: transparent !important;
    border-top: 1px solid var(--desk-border) !important;
  }
  html:not(.capacitor-android) body.app-authed .sidebar-item-danger:hover {
    background: #fff1f2 !important;
    border-color: #ffe4e6 !important;
    color: #be123c !important;
  }

  html:not(.capacitor-android) body.app-authed #app-main.app-container,
  html:not(.capacitor-android) body.app-authed #app-main.app-container.visible {
    position: relative !important;
    width: calc(100vw - var(--desk-sidebar)) !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 0 0 var(--desk-sidebar) !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--desk-canvas) !important;
  }

  html:not(.capacitor-android) body.app-authed #app-main > header {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: var(--desk-header) !important;
    min-height: var(--desk-header) !important;
    max-height: var(--desk-header) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    background: rgba(255,255,255,.97) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--desk-border) !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.035) !important;
    z-index: 2200 !important;
  }
  html:not(.capacitor-android) body.app-authed #app-main > header .header-top {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 26px !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    gap: 18px !important;
    align-items: center !important;
  }
  html:not(.capacitor-android) body.app-authed #app-main > header .common-banner-title {
    grid-column: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--desk-text) !important;
    font-size: 1.12rem !important;
    line-height: 1.15 !important;
    font-weight: 820 !important;
    letter-spacing: -.025em !important;
  }
  html:not(.capacitor-android) body.app-authed #app-main > header .header-right-panel {
    grid-column: 2 !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  html:not(.capacitor-android) body.app-authed #app-main > header .header-right-panel .btn-icon,
  html:not(.capacitor-android) body.app-authed #app-main > header .header-right-panel .btn-icon-small {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #66758a !important;
    box-shadow: none !important;
  }
  html:not(.capacitor-android) body.app-authed #app-main > header .header-right-panel .btn-icon:hover,
  html:not(.capacitor-android) body.app-authed #app-main > header .header-right-panel .btn-icon-small:hover {
    border-color: var(--desk-border) !important;
    background: var(--desk-surface-2) !important;
    color: var(--desk-text) !important;
  }

  /* ───────────────────── Desktop control language ───────────────────── */
  html:not(.capacitor-android) body.app-authed :is(button,input,select,textarea) {
    font-family: 'Inter', sans-serif !important;
  }
  html:not(.capacitor-android) body.app-authed :is(input[type="text"],input[type="search"],input[type="number"],input[type="date"],input[type="time"],input[type="url"],input[type="tel"],select,textarea,.dropdown-select,.select-like,.txn-input) {
    border: 1px solid var(--desk-border-strong) !important;
    border-radius: 10px !important;
    background: var(--desk-surface) !important;
    color: var(--desk-text) !important;
    box-shadow: 0 1px 1px rgba(15,23,42,.025) !important;
    transition: border-color .14s ease, box-shadow .14s ease, background .14s ease !important;
  }
  html:not(.capacitor-android) body.app-authed :is(input[type="text"],input[type="search"],input[type="number"],input[type="date"],input[type="time"],input[type="url"],input[type="tel"],select,.dropdown-select,.select-like,.txn-input) {
    min-height: 40px !important;
  }
  html:not(.capacitor-android) body.app-authed :is(input,select,textarea,.dropdown-select,.select-like,.txn-input):focus {
    outline: none !important;
    border-color: #86aef8 !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,.11) !important;
  }
  html:not(.capacitor-android) body.app-authed textarea { line-height: 1.45 !important; }

  html:not(.capacitor-android) body.app-authed :is(.btn-primary,.btn-secondary,.btn-danger,.btn-text,.btn-sm) {
    min-height: 38px !important;
    border-radius: 10px !important;
    font-size: .78rem !important;
    font-weight: 760 !important;
    letter-spacing: -.005em !important;
    box-shadow: none !important;
  }
  html:not(.capacitor-android) body.app-authed .btn-primary {
    background: #1f2937 !important;
    border-color: #1f2937 !important;
    color: #fff !important;
  }
  html:not(.capacitor-android) body.app-authed .btn-primary:hover { background: #111827 !important; }
  html:not(.capacitor-android) body.app-authed .btn-secondary {
    background: var(--desk-surface) !important;
    border-color: var(--desk-border-strong) !important;
    color: #344054 !important;
  }
  html:not(.capacitor-android) body.app-authed .btn-secondary:hover {
    background: var(--desk-surface-2) !important;
    border-color: #aebdd0 !important;
  }
  html:not(.capacitor-android) body.app-authed :is(.btn-icon,.btn-icon-small,.btn-icon-square) {
    border-radius: 10px !important;
    box-shadow: none !important;
  }

  /* ───────────────────── Expense workspace ───────────────────── */
  html:not(.capacitor-android) body.app-authed #expensePage,
  html:not(.capacitor-android) body.app-authed #expensePage.modal.route-page {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: calc(100dvh - var(--desk-header)) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: var(--desk-canvas) !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="home"] #expensePage > .main-layout {
    width: 100% !important;
    max-width: var(--desktop-content-max) !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 22px 26px 26px !important;
    display: grid !important;
    grid-template-columns: minmax(310px, 360px) minmax(560px,1fr) !important;
    gap: 22px !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="home"] #expensePage .layout-left {
    position: relative !important;
    inset: auto !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    overflow: hidden auto !important;
    scrollbar-width: thin !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="home"] #expensePage .layout-right {
    position: relative !important;
    inset: auto !important;
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    overflow: hidden !important;
  }
  html:not(.capacitor-android) body.app-authed #expensePage .expense-controls {
    min-height: 50px !important;
    margin: 0 !important;
    padding: 7px !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0,1fr) 38px !important;
    align-items: center !important;
    gap: 8px !important;
    border: 1px solid var(--desk-border) !important;
    border-radius: var(--desk-radius-md) !important;
    background: var(--desk-surface) !important;
    box-shadow: none !important;
  }
  html:not(.capacitor-android) body.app-authed #expensePage .expense-controls > .btn-icon,
  html:not(.capacitor-android) body.app-authed #expensePage .expense-controls .settlement-launcher-wrap > .btn-icon {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    border: 1px solid transparent !important;
    background: var(--desk-surface-2) !important;
    color: #59687b !important;
  }
  html:not(.capacitor-android) body.app-authed #expensePage .view-mode-toggle {
    width: 100% !important;
    min-width: 0 !important;
    padding: 3px !important;
    border-radius: 9px !important;
    background: #eef2f6 !important;
  }
  html:not(.capacitor-android) body.app-authed #expensePage .view-mode-toggle button {
    min-height: 32px !important;
    padding: 5px 9px !important;
    border-radius: 7px !important;
    font-size: .72rem !important;
    font-weight: 760 !important;
  }

  html:not(.capacitor-android) body.app-authed #expensePage .dashboard-stats,
  html:not(.capacitor-android) body.app-authed #expensePage .section-container {
    border: 1px solid var(--desk-border) !important;
    border-radius: var(--desk-radius-lg) !important;
    background: var(--desk-surface) !important;
    box-shadow: var(--desk-shadow) !important;
  }
  html:not(.capacitor-android) body.app-authed #expensePage .dashboard-stats {
    padding: 14px !important;
    gap: 12px !important;
  }
  html:not(.capacitor-android) body.app-authed #expensePage .section-container {
    padding: 0 !important;
    overflow: hidden !important;
  }
  html:not(.capacitor-android) body.app-authed #expensePage .section-header {
    min-height: 44px !important;
    padding: 11px 13px 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid #eef2f6 !important;
  }
  html:not(.capacitor-android) body.app-authed #expensePage .section-header h3 {
    font-size: .82rem !important;
    font-weight: 820 !important;
    color: var(--desk-text) !important;
  }
  html:not(.capacitor-android) body.app-authed #accounts-dashboard-list.accounts-scroller {
    padding: 10px !important;
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 8px !important;
    overflow: visible !important;
  }
  html:not(.capacitor-android) body.app-authed #expensePage .account-card {
    min-width: 0 !important;
    width: 100% !important;
    height: 88px !important;
    padding: 12px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(15,23,42,.09) !important;
  }
  html:not(.capacitor-android) body.app-authed #main-add-transaction-btn {
    position: static !important;
    width: 100% !important;
    min-height: 42px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    background: #111827 !important;
    color: #fff !important;
    box-shadow: none !important;
  }

  html:not(.capacitor-android) body.app-authed #expensePage .transaction-toolbar-row {
    flex: 0 0 auto !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 4px 4px 4px 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    border: 1px solid var(--desk-border) !important;
    border-radius: 12px !important;
    background: var(--desk-surface) !important;
    box-shadow: none !important;
  }
  html:not(.capacitor-android) body.app-authed #expensePage .transaction-toolbar-row .period-badge {
    min-height: 34px !important;
    padding: 0 9px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: var(--desk-surface-2) !important;
    color: #475467 !important;
    font-size: .72rem !important;
    font-weight: 760 !important;
  }
  html:not(.capacitor-android) body.app-authed #expensePage .transaction-toolbar-row > :first-child { margin-right: auto !important; }
  html:not(.capacitor-android) body.app-authed #expensePage .transaction-toolbar-row .btn-icon-small {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: #637083 !important;
  }
  html:not(.capacitor-android) body.app-authed #expensePage .filters-container {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 11px !important;
    border: 1px solid var(--desk-border) !important;
    border-radius: 14px !important;
    background: var(--desk-surface) !important;
    box-shadow: none !important;
  }
  html:not(.capacitor-android) body.app-authed #expensePage .search-box {
    margin: 0 0 10px !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
  }
  html:not(.capacitor-android) body.app-authed #expensePage .search-box input {
    height: 40px !important;
    padding-left: 40px !important;
    background: #f8fafc !important;
    border-color: var(--desk-border) !important;
  }
  html:not(.capacitor-android) body.app-authed #expensePage .transaction-flow-toggle {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
  }
  html:not(.capacitor-android) body.app-authed #expensePage .cashflow-toggle-card,
  html:not(.capacitor-android) body.app-authed #expensePage .stat-card {
    min-height: 68px !important;
    padding: 10px 12px !important;
    border: 1px solid var(--desk-border) !important;
    border-radius: 11px !important;
    background: var(--desk-surface) !important;
    box-shadow: none !important;
  }
  html:not(.capacitor-android) body.app-authed #expensePage .cashflow-toggle-card.active-filter {
    border-color: #a9c4f9 !important;
    box-shadow: 0 0 0 2px rgba(37,99,235,.08) !important;
  }
  html:not(.capacitor-android) body.app-authed #expensePage .stat-card h3 {
    margin-top: 5px !important;
    font-size: 1rem !important;
  }
  html:not(.capacitor-android) body.app-authed #expensePage .transactions-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden auto !important;
    border: 1px solid var(--desk-border) !important;
    border-radius: var(--desk-radius-lg) !important;
    background: var(--desk-surface) !important;
    box-shadow: var(--desk-shadow) !important;
    scrollbar-width: thin !important;
  }
  html:not(.capacitor-android) body.app-authed #expensePage .transaction-item {
    min-height: 68px !important;
    padding: 12px 14px !important;
    gap: 12px !important;
    border-left-width: 3px !important;
    border-bottom: 1px solid #edf1f5 !important;
    background: var(--desk-surface) !important;
    transition: background .13s ease !important;
  }
  html:not(.capacitor-android) body.app-authed #expensePage .transaction-item:hover {
    background: #f8fafc !important;
  }
  html:not(.capacitor-android) body.app-authed #expensePage .transaction-title {
    color: var(--desk-text) !important;
    font-size: .82rem !important;
    font-weight: 730 !important;
  }

  /* ───────────────────── Routed pages ───────────────────── */
  html:not(.capacitor-android) body.app-authed[data-active-route]:not([data-active-route="home"]) #expensePage > .main-layout {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route]:not([data-active-route="home"]) #expensePage .layout-left {
    display: none !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route]:not([data-active-route="home"]) #expensePage .layout-right {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  html:not(.capacitor-android) body.app-authed .layout-right > .route-page.route-page-visible,
  html:not(.capacitor-android) body.app-authed[data-active-route="settings"] #settingsModal.route-page,
  html:not(.capacitor-android) body.app-authed[data-active-route="settings"] #settingsModal.modal.route-page {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden auto !important;
    background: var(--desk-canvas) !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  html:not(.capacitor-android) body.app-authed .layout-right > .route-page.route-page-visible > .modal-content,
  html:not(.capacitor-android) body.app-authed[data-active-route="settings"] #settingsModal > .modal-content {
    width: min(100%, 1560px) !important;
    max-width: 1560px !important;
    min-height: 100% !important;
    margin: 0 auto !important;
    padding: 22px 26px 40px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  html:not(.capacitor-android) body.app-authed .layout-right > .route-page .health-route-title-container,
  html:not(.capacitor-android) body.app-authed .layout-right > .route-page .route-page-actions-bar,
  html:not(.capacitor-android) body.app-authed .layout-right > .route-page .modal-header,
  html:not(.capacitor-android) body.app-authed #settingsModal .modal-header {
    min-height: 54px !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 0 16px !important;
    padding: 0 2px 12px !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--desk-border) !important;
    box-shadow: none !important;
  }
  html:not(.capacitor-android) body.app-authed .route-daily-nav-host {
    margin: 0 0 14px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }
  html:not(.capacitor-android) body.app-authed .route-daily-nav {
    max-width: none !important;
    margin: 0 !important;
    padding: 4px !important;
    border: 1px solid var(--desk-border) !important;
    border-radius: 11px !important;
    background: var(--desk-surface) !important;
    box-shadow: none !important;
  }

  /* Health / Workout / Food / Habits */
  html:not(.capacitor-android) body.app-authed .health-page-shell {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 14px !important;
    overflow: visible !important;
  }
  html:not(.capacitor-android) body.app-authed .health-toolbar {
    min-height: 54px !important;
    padding: 13px 14px !important;
    border: 1px solid var(--desk-border) !important;
    border-radius: 14px !important;
    background: var(--desk-surface) !important;
  }
  html:not(.capacitor-android) body.app-authed .health-toolbar h3 {
    font-size: .98rem !important;
    font-weight: 800 !important;
  }
  html:not(.capacitor-android) body.app-authed .health-summary-grid {
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    gap: 10px !important;
  }
  html:not(.capacitor-android) body.app-authed .health-summary-card {
    min-height: 76px !important;
    padding: 13px 14px !important;
    border: 1px solid var(--desk-border) !important;
    border-radius: 14px !important;
    background: var(--desk-surface) !important;
    box-shadow: none !important;
  }
  html:not(.capacitor-android) body.app-authed .health-summary-card span {
    font-size: .64rem !important;
    letter-spacing: .07em !important;
  }
  html:not(.capacitor-android) body.app-authed .health-summary-card strong {
    margin-top: 6px !important;
    font-size: 1.06rem !important;
  }
  html:not(.capacitor-android) body.app-authed .health-filter-panel {
    padding: 12px !important;
    gap: 10px !important;
    border: 1px solid var(--desk-border) !important;
    border-radius: 14px !important;
    background: var(--desk-surface) !important;
    box-shadow: none !important;
  }
  html:not(.capacitor-android) body.app-authed .health-list {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 12px !important;
  }
  html:not(.capacitor-android) body.app-authed :is(.health-record-card,.habit-group-card,.health-feature-user-card,.food-log-card,.health-log-card,.habit-card) {
    min-width: 0 !important;
    padding: 14px !important;
    border: 1px solid var(--desk-border) !important;
    border-radius: 14px !important;
    background: var(--desk-surface) !important;
    box-shadow: none !important;
    transition: border-color .14s ease, box-shadow .14s ease !important;
  }
  html:not(.capacitor-android) body.app-authed :is(.health-record-card,.habit-group-card,.health-feature-user-card,.food-log-card,.health-log-card,.habit-card):hover {
    border-color: #c8d4e3 !important;
    box-shadow: 0 7px 22px rgba(15,23,42,.045) !important;
  }
  html:not(.capacitor-android) body.app-authed .health-meta-grid {
    gap: 6px !important;
    margin-top: 10px !important;
  }
  html:not(.capacitor-android) body.app-authed .health-meta-grid span {
    padding: 7px 8px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: var(--desk-surface-2) !important;
  }

  /* Reports */
  html:not(.capacitor-android) body.app-authed .reports-page {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    gap: 14px !important;
    align-content: start !important;
    overflow: visible !important;
  }
  html:not(.capacitor-android) body.app-authed :is(.reports-section,.report-card,.summary-card) {
    border: 1px solid var(--desk-border) !important;
    border-radius: 14px !important;
    background: var(--desk-surface) !important;
    box-shadow: none !important;
  }

  /* Settings */
  html:not(.capacitor-android) body.app-authed[data-active-route="settings"] #settingsModal > .modal-content {
    display: block !important;
  }
  html:not(.capacitor-android) body.app-authed #settings-directory {
    width: 100% !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    background: transparent !important;
  }
  html:not(.capacitor-android) body.app-authed .settings-directory-heading {
    margin-bottom: 12px !important;
  }
  html:not(.capacitor-android) body.app-authed .settings-directory-heading h3 {
    font-size: 1rem !important;
    font-weight: 820 !important;
  }
  html:not(.capacitor-android) body.app-authed .settings-directory-grid,
  html:not(.capacitor-android) body.app-authed .settings-tile-grid {
    display: grid !important;
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    gap: 11px !important;
  }
  html:not(.capacitor-android) body.app-authed .settings-directory-item,
  html:not(.capacitor-android) body.app-authed .settings-tile {
    min-height: 112px !important;
    padding: 14px !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0,1fr) 24px !important;
    gap: 11px !important;
    align-items: start !important;
    text-align: left !important;
    border: 1px solid var(--desk-border) !important;
    border-radius: 14px !important;
    background: var(--desk-surface) !important;
    box-shadow: none !important;
    transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease !important;
  }
  html:not(.capacitor-android) body.app-authed .settings-directory-item:hover,
  html:not(.capacitor-android) body.app-authed .settings-tile:hover {
    border-color: #b9c8db !important;
    box-shadow: 0 9px 26px rgba(15,23,42,.055) !important;
    transform: translateY(-1px) !important;
  }
  html:not(.capacitor-android) body.app-authed .settings-directory-icon {
    width: 38px !important;
    height: 38px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    background: var(--desk-accent-soft) !important;
    color: var(--desk-accent) !important;
  }
  html:not(.capacitor-android) body.app-authed .settings-tile-copy b {
    font-size: .83rem !important;
    color: var(--desk-text) !important;
  }
  html:not(.capacitor-android) body.app-authed .settings-tile-copy small {
    margin-top: 4px !important;
    font-size: .7rem !important;
    line-height: 1.35 !important;
    color: var(--desk-muted) !important;
  }
  html:not(.capacitor-android) body.app-authed #settingsModal .settings-card {
    margin: 0 0 12px !important;
    padding: 16px !important;
    border: 1px solid var(--desk-border) !important;
    border-radius: 15px !important;
    background: var(--desk-surface) !important;
    box-shadow: none !important;
  }
  html:not(.capacitor-android) body.app-authed #settingsModal .settings-section {
    margin: 8px 0 !important;
    border: 1px solid var(--desk-border) !important;
    border-radius: 11px !important;
    background: #fbfcfe !important;
    overflow: hidden !important;
  }
  html:not(.capacitor-android) body.app-authed #settingsModal .settings-section-head {
    min-height: 50px !important;
    padding: 10px 12px !important;
  }
  html:not(.capacitor-android) body.app-authed #settingsModal .settings-action-grid {
    padding: 10px 12px 12px !important;
    gap: 8px !important;
  }

  /* Tools */
  html:not(.capacitor-android) body.app-authed .tool-grid {
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    gap: 10px !important;
  }
  html:not(.capacitor-android) body.app-authed .tool-grid-button {
    min-height: 118px !important;
    padding: 14px !important;
    border: 1px solid var(--desk-border) !important;
    border-radius: 14px !important;
    background: var(--desk-surface) !important;
    box-shadow: none !important;
  }

  /* ───────────────────── Tasks desktop consolidation ───────────────────── */
  html:not(.capacitor-android) body.app-authed #tasksPage.tasks-route-page {
    background: var(--desk-canvas) !important;
  }
  html:not(.capacitor-android) body.app-authed #tasksPage .tasks-page-content {
    width: 100% !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
    padding: 18px 22px 30px !important;
  }
  html:not(.capacitor-android) body.app-authed #tasksPage .tasks-shell {
    width: 100% !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: 250px minmax(0,1fr) !important;
    gap: 16px !important;
    align-items: start !important;
  }
  html:not(.capacitor-android) body.app-authed #tasksPage .tasks-desktop-nav {
    position: sticky !important;
    top: 0 !important;
    max-height: calc(100dvh - var(--desk-header) - 36px) !important;
    padding: 12px !important;
    border: 1px solid var(--desk-border) !important;
    border-radius: 15px !important;
    background: var(--desk-surface) !important;
    box-shadow: none !important;
    overflow: auto !important;
  }
  html:not(.capacitor-android) body.app-authed #tasksPage .tasks-desktop-board {
    padding: 0 !important;
    gap: 12px !important;
    border: 0 !important;
  }
  html:not(.capacitor-android) body.app-authed #tasksPage .tasks-desktop-card {
    padding: 0 !important;
    border: 1px solid var(--desk-border) !important;
    border-radius: 15px !important;
    background: var(--desk-surface) !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }
  html:not(.capacitor-android) body.app-authed #tasksPage .tasks-desktop-card-head {
    min-height: 48px !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid #edf1f5 !important;
    background: #fbfcfe !important;
  }
  html:not(.capacitor-android) body.app-authed #tasksPage .tasks-desktop-rows {
    padding: 7px !important;
  }
  html:not(.capacitor-android) body.app-authed #tasksPage .task-row {
    min-height: 42px !important;
    margin: 2px 0 !important;
    padding: 7px 8px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html:not(.capacitor-android) body.app-authed #tasksPage .task-row:hover {
    border-color: #e6ebf1 !important;
    background: #f8fafc !important;
  }
  html:not(.capacitor-android) body.app-authed #tasksPage .task-title {
    font-size: .79rem !important;
    line-height: 1.35 !important;
    color: var(--desk-text) !important;
  }

  /* ───────────────────── Dialogs / overlays on desktop ───────────────────── */
  html:not(.capacitor-android) body.app-authed .modal:not(.route-page):not(.currency-modal) {
    padding: 28px !important;
    background: rgba(15,23,42,.34) !important;
    backdrop-filter: blur(5px) !important;
  }
  html:not(.capacitor-android) body.app-authed .modal:not(.route-page):not(.currency-modal) > .modal-content {
    width: min(620px, calc(100vw - 80px)) !important;
    max-width: 620px !important;
    max-height: calc(100dvh - 72px) !important;
    padding: 22px !important;
    border: 1px solid var(--desk-border) !important;
    border-radius: 18px !important;
    background: var(--desk-surface) !important;
    box-shadow: var(--desk-shadow-pop) !important;
  }
  html:not(.capacitor-android) body.app-authed .modal:not(.route-page) .modal-header {
    min-height: 46px !important;
    padding: 0 0 12px !important;
    margin: 0 0 14px !important;
    border-bottom: 1px solid var(--desk-border) !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html:not(.capacitor-android) body.app-authed .modal:not(.route-page) .modal-footer {
    margin-top: 16px !important;
    padding-top: 14px !important;
    border-top: 1px solid var(--desk-border) !important;
  }

  /* Scrollbars are intentionally desktop-only. */
  html:not(.capacitor-android) body.app-authed :is(.layout-left,.transactions-list,.route-page,.modal-content,.sidebar-nav,.tasks-desktop-nav)::-webkit-scrollbar {
    width: 9px !important;
    height: 9px !important;
  }
  html:not(.capacitor-android) body.app-authed :is(.layout-left,.transactions-list,.route-page,.modal-content,.sidebar-nav,.tasks-desktop-nav)::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border: 2px solid transparent !important;
    background-clip: padding-box !important;
    border-radius: 999px !important;
  }
  html:not(.capacitor-android) body.app-authed :is(.layout-left,.transactions-list,.route-page,.modal-content,.sidebar-nav,.tasks-desktop-nav)::-webkit-scrollbar-track {
    background: transparent !important;
  }
}

@media (min-width: 1280px) {
  html:not(.capacitor-android) body.app-authed[data-active-route="home"] #expensePage > .main-layout {
    grid-template-columns: minmax(330px, 390px) minmax(650px,1fr) !important;
    padding-inline: 30px !important;
  }
  html:not(.capacitor-android) body.app-authed .settings-directory-grid,
  html:not(.capacitor-android) body.app-authed .settings-tile-grid {
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
  }
}

@media (min-width: 1450px) {
  html:not(.capacitor-android) body.app-authed #tasksPage .tasks-shell {
    grid-template-columns: 260px minmax(0,1fr) 336px !important;
  }
}

/* Desktop dark appearance — keep the existing pitch-black app theme while
   preserving the same spacing/hierarchy from the professional desktop shell. */
@media (min-width: 1024px) {
  html:not(.capacitor-android)[data-theme="dark"] {
    --desk-canvas: #000000;
    --desk-surface: #080808;
    --desk-surface-2: #0d0d0d;
    --desk-border: #252525;
    --desk-border-strong: #343434;
    --desk-text: #f3f4f6;
    --desk-muted: #9ca3af;
    --desk-accent: #60a5fa;
    --desk-accent-soft: #0d1a2d;
    --desk-shadow: none;
    --desk-shadow-pop: 0 22px 70px rgba(0,0,0,.75);
  }
  html:not(.capacitor-android)[data-theme="dark"] body.app-authed,
  html:not(.capacitor-android)[data-theme="dark"] body.app-authed #app-main,
  html:not(.capacitor-android)[data-theme="dark"] body.app-authed #expensePage,
  html:not(.capacitor-android)[data-theme="dark"] body.app-authed .route-page {
    background: var(--desk-canvas) !important;
  }
  html:not(.capacitor-android)[data-theme="dark"] body.app-authed #app-sidebar.app-sidebar,
  html:not(.capacitor-android)[data-theme="dark"] body.app-authed #app-main > header,
  html:not(.capacitor-android)[data-theme="dark"] body.app-authed :is(
    .dashboard-stats,.section-container,.transaction-toolbar-row,.filters-container,.transactions-list,
    .health-toolbar,.health-summary-card,.health-filter-panel,.health-record-card,.habit-group-card,.health-feature-user-card,
    .settings-directory-item,.settings-tile,.settings-card,.settings-section,.reports-section,.report-card,.summary-card,
    .tool-grid-button,#tasksPage .tasks-desktop-nav,#tasksPage .tasks-desktop-card
  ) {
    background: var(--desk-surface) !important;
    border-color: var(--desk-border) !important;
    color: var(--desk-text) !important;
    box-shadow: none !important;
  }
  html:not(.capacitor-android)[data-theme="dark"] body.app-authed #app-main > header {
    border-bottom-color: var(--desk-border) !important;
  }
  html:not(.capacitor-android)[data-theme="dark"] body.app-authed :is(
    .common-banner-title,.sidebar-brand,.sidebar-user-name,.transaction-title,.settings-tile-copy b,
    .health-toolbar h3,#tasksPage .task-title
  ) { color: var(--desk-text) !important; }
  html:not(.capacitor-android)[data-theme="dark"] body.app-authed :is(
    .sidebar-card-label,.settings-tile-copy small,.health-toolbar p,.muted,.subtitle,small
  ) { color: var(--desk-muted) !important; }
  html:not(.capacitor-android)[data-theme="dark"] body.app-authed .sidebar-item:hover,
  html:not(.capacitor-android)[data-theme="dark"] body.app-authed #tasksPage .task-row:hover,
  html:not(.capacitor-android)[data-theme="dark"] body.app-authed #expensePage .transaction-item:hover {
    background: #111111 !important;
    border-color: #282828 !important;
  }
  html:not(.capacitor-android)[data-theme="dark"] body.app-authed #expensePage .transaction-item,
  html:not(.capacitor-android)[data-theme="dark"] body.app-authed #expensePage .section-header,
  html:not(.capacitor-android)[data-theme="dark"] body.app-authed #tasksPage .tasks-desktop-card-head {
    background: var(--desk-surface) !important;
    border-color: var(--desk-border) !important;
  }
  html:not(.capacitor-android)[data-theme="dark"] body.app-authed :is(input,select,textarea,.dropdown-select,.select-like,.txn-input) {
    background: #0b0b0b !important;
    color: #f5f5f5 !important;
    border-color: var(--desk-border-strong) !important;
  }
  html:not(.capacitor-android)[data-theme="dark"] body.app-authed .modal:not(.route-page):not(.currency-modal) > .modal-content {
    background: #080808 !important;
    border-color: #2a2a2a !important;
  }
}