/* Life V323 — desktop Tasks reference layout.
   This file intentionally targets desktop browsers only and never Capacitor Android/mobile. */

@media (min-width: 1024px) {
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] {
    --task-ref-topbar: 68px;
    --task-ref-app-column: 312px;
    --task-ref-sidebar-left: 14px;
    --task-ref-sidebar-width: 288px;
    --task-ref-task-nav: 290px;
    --task-ref-gap: 8px;
    --task-ref-canvas: #f4f7fb;
    --task-ref-surface: #ffffff;
    --task-ref-border: #e0e6ee;
    --task-ref-border-soft: #edf1f5;
    --task-ref-text: #171a21;
    --task-ref-muted: #7a8494;
    --task-ref-blue: #2f6fe4;
    --task-ref-blue-soft: #eef4ff;
    --task-ref-radius: 13px;
    min-width: 1024px !important;
    overflow: hidden !important;
    background: var(--task-ref-canvas) !important;
  }

  /* Full-width top application bar, matching the reference. */
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #app-main.app-container,
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #app-main.app-container.visible {
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    margin: 0 !important;
    background: var(--task-ref-canvas) !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #app-main > header {
    position: relative !important;
    z-index: 5300 !important;
    width: 100vw !important;
    height: var(--task-ref-topbar) !important;
    min-height: var(--task-ref-topbar) !important;
    max-height: var(--task-ref-topbar) !important;
    border-bottom: 1px solid #dfe5ec !important;
    background: rgba(255,255,255,.985) !important;
    box-shadow: 0 1px 3px rgba(15,23,42,.035) !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #app-main > header .header-top {
    height: 100% !important;
    padding: 0 24px 0 22px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #mobile-menu-btn {
    display: grid !important;
    place-items: center !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: #5d6674 !important;
    box-shadow: none !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #mobile-menu-btn .material-symbols-rounded {
    font-size: 22px !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #common-banner-title {
    display: none !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] .tasks-reference-header-brand {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    color: #16191f !important;
    font-size: 1.1rem !important;
    font-weight: 820 !important;
    letter-spacing: -.02em !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] .tasks-reference-header-brand > .material-symbols-rounded {
    width: 38px !important;
    height: 38px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 11px !important;
    background: linear-gradient(180deg,#3676eb 0%,#2864dc 100%) !important;
    color: #fff !important;
    font-size: 21px !important;
    font-variation-settings: 'FILL' 1, 'wght' 600 !important;
    box-shadow: 0 3px 8px rgba(47,111,228,.22) !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #app-main > header .header-right-panel {
    display: none !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] .tasks-reference-header-actions {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] .tasks-reference-header-icon {
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #48515e !important;
    cursor: pointer !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] .tasks-reference-header-icon:hover {
    background: #f3f6fa !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] .tasks-reference-header-icon .material-symbols-rounded {
    font-size: 23px !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] .tasks-reference-avatar {
    width: 38px !important;
    height: 38px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: #f2f4f7 !important;
    color: #667085 !important;
    font-size: .82rem !important;
    font-weight: 700 !important;
  }

  /* Left Life navigation becomes the rounded card shown below the top bar. */
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #app-sidebar.app-sidebar,
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #app-sidebar.app-sidebar.open,
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #app-sidebar.app-sidebar:not(.open) {
    inset: calc(var(--task-ref-topbar) + 18px) auto 14px var(--task-ref-sidebar-left) !important;
    width: var(--task-ref-sidebar-width) !important;
    min-width: var(--task-ref-sidebar-width) !important;
    max-width: var(--task-ref-sidebar-width) !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 10px 10px !important;
    border: 1px solid var(--task-ref-border) !important;
    border-radius: 13px !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.025) !important;
    overflow: hidden !important;
    z-index: 5100 !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] .sidebar-header {
    min-height: 70px !important;
    height: 70px !important;
    padding: 0 2px !important;
    border-bottom: 1px solid var(--task-ref-border) !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] .sidebar-brand {
    gap: 10px !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: var(--task-ref-text) !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] .sidebar-brand > .material-symbols-rounded {
    width: 38px !important;
    height: 38px !important;
    max-width: 38px !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg,#3979ed,#2d66df) !important;
    font-size: 21px !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] .sidebar-header-actions {
    gap: 2px !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] .sidebar-header-actions .btn-icon {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    border: 0 !important;
    border-radius: 9px !important;
    color: #222831 !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] .sidebar-user {
    display: none !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] .sidebar-cards {
    min-height: 176px !important;
    padding: 12px 0 12px !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] .sidebar-card {
    min-height: 150px !important;
    height: 150px !important;
    padding: 14px 12px !important;
    border: 1px solid var(--task-ref-border) !important;
    border-radius: 12px !important;
    background: #fff !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] .sidebar-card:hover {
    transform: none !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] .sidebar-card-label {
    color: #5f6876 !important;
    font-size: .66rem !important;
    line-height: 1.18 !important;
    font-weight: 820 !important;
    letter-spacing: .03em !important;
    text-transform: uppercase !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] .sidebar-spent-value {
    margin-top: 13px !important;
    font-size: 1rem !important;
    font-weight: 780 !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] .sidebar-nav {
    padding: 5px 0 !important;
    gap: 4px !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] .sidebar-nav::before {
    padding: 3px 10px 11px !important;
    color: #7c8797 !important;
    font-size: .67rem !important;
    font-weight: 830 !important;
    letter-spacing: .06em !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] .sidebar-item {
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 12px !important;
    gap: 12px !important;
    border-radius: 9px !important;
    color: #343b47 !important;
    font-size: .84rem !important;
    font-weight: 700 !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] .sidebar-item > .material-symbols-rounded {
    font-size: 20px !important;
    color: #697484 !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] .sidebar-item.active,
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] .sidebar-nav .sidebar-item.active {
    border-color: transparent !important;
    background: #edf4ff !important;
    color: #2f6dcf !important;
    box-shadow: inset 2px 0 0 #3778e7 !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] .sidebar-footer {
    padding: 7px 0 0 !important;
    border-top: 0 !important;
  }

  /* Tasks route starts after the permanent app column, while its top title strip spans the content area. */
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage.tasks-route-page {
    position: relative !important;
    width: calc(100vw - var(--task-ref-app-column)) !important;
    height: calc(100dvh - var(--task-ref-topbar)) !important;
    min-height: 0 !important;
    margin: 0 0 0 var(--task-ref-app-column) !important;
    overflow: hidden !important;
    background: var(--task-ref-canvas) !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-page-content {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: var(--task-ref-canvas) !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-reference-page-title {
    display: flex !important;
    flex: 0 0 68px !important;
    min-height: 68px !important;
    align-items: center !important;
    padding: 0 24px !important;
    border-bottom: 1px solid #e1e6ed !important;
    background: rgba(255,255,255,.93) !important;
    color: #171a20 !important;
    font-size: 1.18rem !important;
    font-weight: 820 !important;
    letter-spacing: -.02em !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-shell {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 18px 14px 18px !important;
    display: grid !important;
    grid-template-columns: var(--task-ref-task-nav) minmax(0,1fr) !important;
    gap: var(--task-ref-gap) !important;
    align-items: stretch !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Life Tasks navigation card. */
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-desktop-nav {
    position: relative !important;
    top: auto !important;
    display: flex !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    height: 100% !important;
    padding: 18px 22px 18px !important;
    flex-direction: column !important;
    gap: 7px !important;
    overflow: hidden auto !important;
    border: 1px solid var(--task-ref-border) !important;
    border-radius: var(--task-ref-radius) !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.025) !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-desktop-brand {
    min-height: 50px !important;
    margin: 0 0 7px !important;
    padding: 0 4px !important;
    gap: 11px !important;
    font-size: 1.06rem !important;
    font-weight: 830 !important;
    color: #181b22 !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-desktop-brand > .material-symbols-rounded {
    width: 40px !important;
    height: 40px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 11px !important;
    background: linear-gradient(180deg,#3978eb,#2d67df) !important;
    color: #fff !important;
    font-size: 22px !important;
    font-variation-settings: 'FILL' 1, 'wght' 600 !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-desktop-fullscreen {
    min-height: 45px !important;
    margin: 0 0 7px !important;
    padding: 0 13px !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: #3d4653 !important;
    font-size: .84rem !important;
    font-weight: 720 !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-desktop-fullscreen .material-symbols-rounded {
    font-size: 19px !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-desktop-create {
    min-height: 46px !important;
    height: 46px !important;
    margin: 0 0 14px !important;
    padding: 0 14px !important;
    justify-content: center !important;
    gap: 7px !important;
    border: 1px solid #2f6fe4 !important;
    border-radius: 7px !important;
    background: linear-gradient(180deg,#3477ec 0%,#2e68df 100%) !important;
    color: #fff !important;
    font-size: .85rem !important;
    font-weight: 750 !important;
    box-shadow: 0 3px 8px rgba(47,111,228,.14) !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-desktop-create .material-symbols-rounded {
    font-size: 20px !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-desktop-search {
    min-height: 42px !important;
    height: 42px !important;
    margin: 0 0 5px !important;
    padding: 0 11px !important;
    gap: 8px !important;
    border: 1px solid #dfe4eb !important;
    border-radius: 8px !important;
    background: #fff !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-desktop-search > .material-symbols-rounded {
    color: #717b89 !important;
    font-size: 19px !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-desktop-search input {
    height: 40px !important;
    border: 0 !important;
    background: transparent !important;
    color: #252a33 !important;
    font-size: .82rem !important;
    box-shadow: none !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-desktop-search input::placeholder {
    color: #8791a0 !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-desktop-nav-item {
    min-height: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    gap: 10px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #303640 !important;
    font-size: .84rem !important;
    font-weight: 720 !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-desktop-nav-item.active {
    background: #eef4ff !important;
    color: #3170db !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-desktop-nav-item .material-symbols-rounded {
    font-size: 20px !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-desktop-nav-item:first-of-type .material-symbols-rounded {
    font-variation-settings: 'FILL' 1, 'wght' 650 !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-desktop-nav-item:nth-of-type(2) .material-symbols-rounded {
    color: #1f232a !important;
    font-variation-settings: 'FILL' 1, 'wght' 600 !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-desktop-nav-title {
    min-height: 38px !important;
    padding: 12px 10px 5px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #727c8b !important;
    font-size: .7rem !important;
    font-weight: 760 !important;
    letter-spacing: .01em !important;
    text-transform: none !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-desktop-nav-title .material-symbols-rounded {
    font-size: 17px !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-desktop-list-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-desktop-list-button,
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-desktop-list-button.active {
    min-height: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 9px !important;
    display: grid !important;
    grid-template-columns: 14px minmax(0,1fr) auto !important;
    gap: 2px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #2c6fd4 !important;
    box-shadow: none !important;
    font-size: .82rem !important;
    font-weight: 720 !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-desktop-list-button:hover {
    background: #f6f9fd !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-list-check {
    width: 12px !important;
    height: 18px !important;
    display: block !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: transparent !important;
    font-size: 0 !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-list-check::before {
    content: "•" !important;
    display: block !important;
    color: #3477e6 !important;
    font-size: 17px !important;
    line-height: 16px !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-desktop-list-button b {
    min-width: 28px !important;
    height: 25px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 7px !important;
    border-radius: 999px !important;
    background: #f4f6f8 !important;
    color: #7b8491 !important;
    font-size: .68rem !important;
    font-weight: 730 !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-desktop-new-list {
    min-height: 45px !important;
    height: 45px !important;
    margin: 10px 0 0 !important;
    padding: 0 12px !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 1px solid #e0e5ec !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #272d36 !important;
    font-size: .82rem !important;
    font-weight: 720 !important;
  }

  /* Only one selected-list card is visible, exactly like the reference. */
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage #tasks-desktop-board,
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-navigation-panel,
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-desktop-inspector {
    display: none !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-workspace {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-list-card {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border: 1px solid var(--task-ref-border) !important;
    border-radius: var(--task-ref-radius) !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.025) !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-list-card-header {
    position: relative !important;
    top: auto !important;
    z-index: 3 !important;
    flex: 0 0 96px !important;
    width: 100% !important;
    min-height: 96px !important;
    height: 96px !important;
    margin: 0 !important;
    padding: 21px 30px 17px 31px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    border: 0 !important;
    border-bottom: 1px solid var(--task-ref-border-soft) !important;
    background: #fff !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage #tasks-list-heading {
    margin: 0 !important;
    color: #171a20 !important;
    font-size: 1.42rem !important;
    line-height: 1.14 !important;
    font-weight: 840 !important;
    letter-spacing: -.03em !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-list-summary {
    display: block !important;
    margin: 4px 0 0 !important;
    color: #7e8795 !important;
    font-size: .82rem !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-header-actions {
    margin: 4px 0 0 auto !important;
    display: flex !important;
    gap: 9px !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-header-actions .tasks-icon-button,
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-header-actions button {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: #252b34 !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-header-actions button:hover {
    background: #f5f7fa !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-header-actions .material-symbols-rounded {
    font-size: 21px !important;
  }

  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-reference-column-head {
    flex: 0 0 45px !important;
    min-height: 45px !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 140px 42px !important;
    align-items: center !important;
    padding: 0 18px 0 64px !important;
    border-bottom: 1px solid var(--task-ref-border-soft) !important;
    background: #fff !important;
    color: #737d8c !important;
    font-size: .68rem !important;
    font-weight: 820 !important;
    letter-spacing: .045em !important;
    text-transform: uppercase !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-reference-column-head > span:nth-child(2) {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-reference-column-head > span:nth-child(2) .material-symbols-rounded {
    font-size: 15px !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-reference-column-head > span:last-child {
    justify-self: center !important;
    font-size: 20px !important;
    color: #7f8794 !important;
    font-variation-settings: 'FILL' 1 !important;
  }

  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage #tasks-feedback:not(.hidden) {
    flex: 0 0 auto !important;
    margin: 8px 18px 0 !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: block !important;
    padding: 0 !important;
    overflow: auto !important;
    scrollbar-width: thin !important;
    background: #fff !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-section,
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-section-rows,
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-subtasks {
    width: 100% !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-row,
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-row:has(> .task-drag-handle:not(.hidden)) {
    width: 100% !important;
    min-height: 66px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 9px 18px !important;
    display: grid !important;
    grid-template-columns: 26px 38px minmax(0,1fr) 42px !important;
    align-items: center !important;
    column-gap: 7px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--task-ref-border-soft) !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    transition: background .12s ease !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-row:not(:has(> .task-drag-handle:not(.hidden))) {
    grid-template-columns: 26px 38px minmax(0,1fr) 42px !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-row:not(:has(> .task-drag-handle:not(.hidden)))::before {
    content: "" !important;
    grid-column: 1 !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-row:not(:has(> .task-drag-handle:not(.hidden))) > .task-check {
    grid-column: 2 !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-row:not(:has(> .task-drag-handle:not(.hidden))) > .task-row-body {
    grid-column: 3 !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-row:not(:has(> .task-drag-handle:not(.hidden))) > .task-star {
    grid-column: 4 !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-row:hover,
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-row.desktop-selected {
    border-color: var(--task-ref-border-soft) !important;
    background: #fbfcfe !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-row-subtask,
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-row-subtask:has(> .task-drag-handle:not(.hidden)) {
    width: 100% !important;
    min-height: 66px !important;
    margin: 0 !important;
    padding-left: 54px !important;
    border-left: 0 !important;
    background: #fff !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-drag-handle {
    width: 26px !important;
    height: 38px !important;
    display: grid !important;
    place-items: center !important;
    color: #8a929e !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-drag-handle .material-symbols-rounded {
    font-size: 18px !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-check {
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    display: grid !important;
    place-items: center !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-check-mark {
    width: 24px !important;
    height: 24px !important;
    border: 1.8px solid #7f8894 !important;
    border-radius: 50% !important;
    background: #fff !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-row.completed .task-check-mark {
    border-color: var(--task-ref-blue) !important;
    background: var(--task-ref-blue) !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-row-body {
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 3px 0 !important;
    gap: 4px !important;
    justify-content: center !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-title {
    width: 100% !important;
    color: #22272f !important;
    font-size: .84rem !important;
    line-height: 1.35 !important;
    font-weight: 540 !important;
    letter-spacing: -.006em !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-meta {
    min-height: 0 !important;
    margin: 0 !important;
    gap: 7px !important;
    color: #7a8492 !important;
    font-size: .66rem !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-star {
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    border-radius: 9px !important;
    color: #6f7885 !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-star:hover {
    background: #f3f6fa !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-star .material-symbols-rounded {
    font-size: 22px !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-parent-completed-toggle,
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-inline-add-subtask {
    width: 100% !important;
    min-height: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 18px 0 64px !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--task-ref-border-soft) !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #596474 !important;
    font-size: .72rem !important;
    font-weight: 650 !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-inline-add-subtask {
    color: #2f70d7 !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-parent-completed-toggle:hover,
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-inline-add-subtask:hover {
    background: #fbfcfe !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-completed-toggle {
    flex: 0 0 42px !important;
    min-height: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-top: 1px solid var(--task-ref-border-soft) !important;
    border-radius: 0 !important;
    background: #fff !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-fab {
    display: none !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-overview-block {
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--task-ref-border-soft) !important;
    border-radius: 0 !important;
    background: #fff !important;
  }

  /* Topic/People chips remain readable without disturbing the reference row geometry. */
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-tags-inline {
    margin: 2px 0 0 !important;
    gap: 4px !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-tags-inline b,
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-tag-chip {
    min-height: 20px !important;
    padding: 2px 7px !important;
    border-radius: 999px !important;
    font-size: .61rem !important;
    line-height: 1.1 !important;
  }

  /* Reference-style thin scrollbars. */
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] :is(.sidebar-nav,.tasks-desktop-nav,#tasksPage .tasks-list)::-webkit-scrollbar {
    width: 7px !important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] :is(.sidebar-nav,.tasks-desktop-nav,#tasksPage .tasks-list)::-webkit-scrollbar-thumb {
    border: 2px solid transparent !important;
    border-radius: 999px !important;
    background: #c7ced8 !important;
    background-clip: padding-box !important;
  }
}

/* Keep the reference geometry in dark mode without changing the desktop-only boundary. */
@media (min-width: 1024px) {
  html:not(.capacitor-android)[data-theme="dark"] body.app-authed[data-active-route="tasks"] {
    --task-ref-canvas: #080a0d;
    --task-ref-surface: #101216;
    --task-ref-border: #282c33;
    --task-ref-border-soft: #20242a;
    --task-ref-text: #f3f4f6;
    --task-ref-muted: #9ca3af;
  }
  html:not(.capacitor-android)[data-theme="dark"] body.app-authed[data-active-route="tasks"] #app-main > header,
  html:not(.capacitor-android)[data-theme="dark"] body.app-authed[data-active-route="tasks"] #app-sidebar.app-sidebar,
  html:not(.capacitor-android)[data-theme="dark"] body.app-authed[data-active-route="tasks"] #tasksPage .tasks-reference-page-title,
  html:not(.capacitor-android)[data-theme="dark"] body.app-authed[data-active-route="tasks"] #tasksPage .tasks-desktop-nav,
  html:not(.capacitor-android)[data-theme="dark"] body.app-authed[data-active-route="tasks"] #tasksPage .tasks-list-card,
  html:not(.capacitor-android)[data-theme="dark"] body.app-authed[data-active-route="tasks"] #tasksPage .tasks-list-card-header,
  html:not(.capacitor-android)[data-theme="dark"] body.app-authed[data-active-route="tasks"] #tasksPage .tasks-reference-column-head,
  html:not(.capacitor-android)[data-theme="dark"] body.app-authed[data-active-route="tasks"] #tasksPage .tasks-list,
  html:not(.capacitor-android)[data-theme="dark"] body.app-authed[data-active-route="tasks"] #tasksPage .task-row,
  html:not(.capacitor-android)[data-theme="dark"] body.app-authed[data-active-route="tasks"] #tasksPage .task-parent-completed-toggle,
  html:not(.capacitor-android)[data-theme="dark"] body.app-authed[data-active-route="tasks"] #tasksPage .task-inline-add-subtask {
    background: var(--task-ref-surface) !important;
    border-color: var(--task-ref-border-soft) !important;
    color: var(--task-ref-text) !important;
  }
}