/* Cleaned CSS: original visual cascade preserved without priority flags. */

@layer afghanlpg-base, afghanlpg-priority;

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

     }

}

@keyframes menuPop {
     from {
         opacity: 0;
         transform: translateY(-5px) scale(.98);

    }
     to {
         opacity: 1;
         transform: translateY(0) scale(1);

    }

}

@keyframes toastIn {
     from {
         opacity: 0;
         transform: translateY(8px) scale(.98);

    }
     to {
         opacity: 1;
         transform: translateY(0) scale(1);

    }

}

@keyframes serverSkeletonSweep {
  to { inset-inline-start: 110%; }
}

@layer afghanlpg-base {
  :root {
    color-scheme: light dark;
    --side: 288px;
    --side-collapsed: 76px;
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-alt: #f7f7f8;
    --surface-hover: #ececf1;
    --text: #0d0d0d;
    --muted: #6b7280;
    --border: #e5e7eb;
    --border-strong: #d1d5db;
    --accent: #10a37f;
    --accent-hover: #0e8f70;
    --danger: #dc2626;
    --success: #138a63;
    --warning: #b45309;
    --radius: 10px;
    --focus: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
    --c-bg: var(--bg);
    --c-surface: var(--surface);
    --c-surface-2: var(--surface-alt);
    --c-border: var(--border);
    --c-sidebar: var(--surface-alt);
    --c-nav-active: var(--surface-hover);
  }

  html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #212121;
    --surface: #2f2f2f;
    --surface-alt: #262626;
    --surface-hover: #3a3a3a;
    --text: #ececf1;
    --muted: #b4b4b4;
    --border: #424242;
    --border-strong: #565656;
    --accent: #10a37f;
    --accent-hover: #13b38d;
    --danger: #f87171;
    --success: #23a37a;
    --warning: #f59e0b;
  }

  html[data-theme="light"] {
    color-scheme: light;
  }

  * {
    box-sizing: border-box;
  }

  html,
  body {
    margin: 0;
    min-height: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    background: var(--bg);
    color: var(--text);
    font: 15px/1.65 "Noto Naskh Arabic", "Noto Sans Arabic", "Vazirmatn", "Segoe UI", Tahoma, Arial, sans-serif;
  }

  body.modal-open,
  body.cal-lock {
    overflow: hidden;
  }

  * {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
    color: inherit;
  }

  button {
    appearance: none;
    min-height: 2.45rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .48rem .85rem;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    line-height: 1.25;
    text-align: center;
    box-shadow: none;
    white-space: nowrap;
  }

  button:hover {
    background: var(--surface-hover);
    border-color: var(--border-strong);
  }

  button:active {
    transform: translateY(1px);
  }

  button:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
  }

  body.app-action-busy {
    cursor: progress;
  }

  button.is-action-working {
    opacity: 1;
    cursor: progress;
    position: relative;
    pointer-events: none;
    box-shadow: inset 0 0 0 999px color-mix(in srgb, #000 6%, transparent);
  }

  .action-spinner {
    inline-size: 1em;
    block-size: 1em;
    border: 2px solid currentColor;
    border-inline-start-color: transparent;
    border-radius: 999px;
    display: inline-block;
    flex: 0 0 auto;
    animation: action-spin .72s linear infinite;
  }

  .app-action-status {
    position: fixed;
    inset-inline: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    z-index: 12000;
    max-width: 520px;
    margin-inline: auto;
    padding: .72rem .9rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    color: var(--text);
    box-shadow: 0 12px 32px color-mix(in srgb, #000 15%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    opacity: 0;
    transform: translateY(14px) scale(.98);
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
    backdrop-filter: blur(14px);
  }

  .app-action-status.show {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  .app-action-status.slow {
    border-color: color-mix(in srgb, var(--warning) 55%, var(--border));
  }

  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  input.app-soft-focused,
  select.app-soft-focused,
  textarea.app-soft-focused {
    outline: none;
    box-shadow: var(--focus);
    border-color: var(--accent);
  }

  button:not(.gray):not(.ghost):not(.red):not(.danger):not(.green):not(.warn):not(.icon-only):not(.perm-check) {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }

  button:not(.gray):not(.ghost):not(.red):not(.danger):not(.green):not(.warn):not(.icon-only):not(.perm-check):hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
  }

  button.gray,
  button.ghost,
  .perm-check {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
  }

  button.green,
  .badge.green {
    background: var(--success);
    color: #fff;
    border-color: transparent;
  }

  button.red,
  button.danger {
    background: var(--danger);
    color: #fff;
    border-color: transparent;
  }

  button.warn,
  .badge.warn {
    background: var(--warning);
    color: #fff;
    border-color: transparent;
  }

  .icon-only {
    inline-size: 2.45rem;
    block-size: 2.45rem;
    padding: 0;
    flex: 0 0 auto;
  }

  a {
    color: var(--accent);
  }

  h1,
  h2,
  h3,
  p {
    margin-top: 0;
  }

  small,
  .muted {
    color: var(--muted);
  }

  hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 1rem 0;
  }

  .login {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1rem;
  }

  .login-card,
  .card,
  .modal-card,
  .quick-modal-card,
  .top-user,
  .topbar-menu,
  .detail-box,
  .toast,
  .cal,
  .export-range {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: none;
  }

  .login-card {
    width: min(460px, 100%);
    padding: 1.25rem;
  }

  .brand,
  .top-user,
  .actions,
  .topbar,
  .topbar-title-block,
  .table-tools,
  .filter-row,
  .pager-actions,
  .topbar-actions,
  .topbar-page-actions,
  .cal-head,
  .cal-actions,
  .cal-nav,
  .cal-time {
    display: flex;
    align-items: center;
    gap: .65rem;
  }

  .actions,
  .topbar,
  .table-tools,
  .filter-row,
  .pager-actions,
  .topbar-actions,
  .topbar-page-actions {
    flex-wrap: wrap;
  }

  .logo,
  .avatar {
    inline-size: 2.8rem;
    block-size: 2.8rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--surface-hover);
    overflow: hidden;
    flex: 0 0 auto;
  }

  .avatar img,
  .avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .field {
    margin: .75rem 0;
    min-width: 0;
  }

  .field label {
    display: block;
    margin-bottom: .25rem;
    color: var(--muted);
  }

  .field input,
  .field select,
  .field textarea,
  .table-filter,
  .pager-size select,
  .cal select {
    width: 100%;
    min-height: 2.55rem;
    padding: .48rem .7rem;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    outline: none;
  }

  .field input:hover,
  .field select:hover,
  .field textarea:hover,
  .table-filter:hover,
  .pager-size select:hover,
  .cal select:hover {
    border-color: var(--border-strong);
  }

  textarea {
    min-height: 5rem;
    resize: vertical;
  }

  .app {
    display: none;
    min-height: 100vh;
    width: 100%;
    max-width: 100%;
  }

  .sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    width: var(--side);
    max-width: min(var(--side), 100vw);
    padding: .75rem;
    background: var(--surface-alt);
    border-inline-start: 1px solid var(--border);
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    overflow: auto;
  }

  html[dir="ltr"] .sidebar {
    inset-inline-start: 0;
    inset-inline-end: auto;
    border-inline-start: 0;
    border-inline-end: 1px solid var(--border);
  }

  .main {
    min-height: 100vh;
    margin-inline-end: var(--side);
    padding: 1rem;
    max-width: calc(100% - var(--side));
    min-width: 0;
  }

  html[dir="ltr"] .main {
    margin-inline-end: 0;
    margin-inline-start: var(--side);
  }

  .side-collapsed {
    --side: var(--side-collapsed);
  }

  .side-collapsed .sidebar {
    width: var(--side-collapsed);
    padding-inline: .5rem;
  }

  .side-collapsed .nav-label,
  .side-collapsed .uinfo,
  .side-collapsed .footer-name {
    display: none;
  }

  .side-collapsed .sidebar {
    align-items: center;
  }

  .side-collapsed .top-user,
  .side-collapsed .nav button {
    justify-content: center;
  }

  .side-collapsed .top-user {
    width: 100%;
    padding: .35rem;
    border-color: transparent;
    background: transparent;
  }

  .side-collapsed .avatar {
    width: 2.3rem;
    height: 2.3rem;
  }

  .side-collapsed .side-actions {
    width: 100%;
    justify-content: center;
  }

  .side-collapsed .nav {
    width: 100%;
    align-items: center;
  }

  .side-collapsed .nav button {
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 12px;
  }

  .side-collapsed .nav-icon {
    margin: 0;
    inline-size: 1.35rem;
    block-size: 1.35rem;
  }

  .side-collapsed .nav-icon svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  .nav {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    overflow: auto;
    flex: 1;
  }

  .nav button {
    width: 100%;
    min-height: 2.55rem;
    justify-content: flex-start;
    background: transparent;
    color: var(--text);
    border-color: transparent;
    box-shadow: none;
    padding: .5rem .65rem;
    white-space: normal;
  }

  .nav button:hover {
    background: var(--surface);
    border-color: var(--border);
  }

  .nav button.active {
    background: var(--surface-hover);
    color: var(--text);
    border-color: var(--border);
  }

  .nav-icon,
  .app-icon-inline,
  .btn-icon,
  .inline-icon {
    display: inline-grid;
    place-items: center;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    flex: 0 0 1.25rem;
    color: currentColor;
  }

  .nav-icon svg,
  .app-icon-inline svg,
  .btn-icon svg,
  .inline-icon svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .nav-label {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .footer-name {
    color: var(--muted);
    font-size: .9rem;
    text-align: center;
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    justify-content: space-between;
    align-items: flex-start;
    padding: .65rem 0 .9rem;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
  }

  .topbar-title-block {
    align-items: flex-start;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
    flex: 1 1 16rem;
  }

  .topbar-actions {
    margin-inline-start: auto;
    justify-content: flex-end;
    min-width: 0;
  }

  .topbar-menu-wrap {
    position: relative;
  }

  .topbar-menu {
    display: none;
    position: absolute;
    inset-block-start: calc(100% + .45rem);
    inset-inline-end: 0;
    min-width: 13rem;
    max-width: min(92vw, 18rem);
    padding: .5rem;
    z-index: 50;
  }

  .topbar-menu.open {
    display: block;
  }

  .topbar-menu-item {
    width: 100%;
    justify-content: flex-start;
    margin-top: .35rem;
  }

  .mobile-overlay,
  .mobile-only {
    display: none;
  }

  .desktop-only {
    display: inline-flex;
  }

  .card {
    padding: 1rem;
    margin-bottom: 1rem;
    max-width: 100%;
    min-width: 0;
  }

  .grid {
    display: grid;
    gap: .85rem;
    min-width: 0;
  }

  .grid>* {
    min-width: 0;
  }

  .cols2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cols3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cols4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .metric b {
    display: block;
    font-size: 1.35rem;
    margin: .2rem 0;
  }

  .clickable,
  .clickrow {
    cursor: pointer;
  }

  .clickable:hover,
  tr.clickrow:hover {
    background: var(--surface-alt);
  }

  .badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: .22rem .58rem;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    font-size: .85rem;
  }

  .bar {
    height: .55rem;
    border-radius: 999px;
    background: var(--surface-alt);
    overflow: hidden;
  }

  .bar i {
    display: block;
    height: 100%;
    background: var(--accent);
  }

  .table-card,
  .data-table-shell,
  #content,
  #modalBody,
  #topbarPageActions,
  .table-tools,
  .table-export-actions,
  .filter-row,
  .topbar-title-block,
  .topbar-actions,
  .topbar-page-actions,
  .card,
  .table-wrap,
  .pager,
  .pager-actions,
  .quick-modal-card,
  .modal-card {
    min-width: 0;
    max-width: 100%;
  }

  .table-tools {
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: .65rem;
  }

  .filter-row {
    flex: 1 1 18rem;
  }

  .table-export-actions {
    flex-wrap: wrap;
  }

  .table-wrap {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: auto;
    touch-action: pan-x pan-y;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
  }

  .table-scroll-y {
    max-height: min(65vh, 860px);
  }

  table.data-table {
    width: 100%;
    min-width: var(--tbl-min, 720px);
    border-collapse: collapse;
    table-layout: auto;
  }

  th,
  td {
    padding: .58rem .7rem;
    border-bottom: 1px solid var(--border);
    text-align: start;
    vertical-align: top;
  }

  th {
    background: var(--surface-alt);
    font-weight: 700;
    position: sticky;
    top: 0;
    z-index: 1;
  }

  tfoot td {
    font-weight: 700;
    background: var(--surface-alt);
  }

  .cell-inner {
    max-width: 34rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  td:last-child .cell-inner,
  th:last-child .cell-inner {
    max-width: none;
  }

  .table-pager,
  .pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: .6rem;
  }

  .pager-size {
    width: auto;
    min-height: 2rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
  }

  .pager-size select {
    width: auto;
    min-width: 5rem;
    min-height: 2rem;
  }

  .modal,
  .quick-modal,
  .avatar-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    padding: 1rem;
    background: rgba(0, 0, 0, .45);
    overflow: auto;
  }

  .modal.open,
  .quick-modal.open,
  .avatar-lightbox.open {
    display: grid;
    place-items: center;
  }

  .modal-card,
  .quick-modal-card,
  .avatar-lightbox-card {
    width: min(900px, 100%);
    max-height: 92vh;
    overflow: auto;
    padding: 1rem;
  }

  .quick-modal {
    z-index: 130;
  }

  .toast-stack {
    position: fixed;
    inset-block-end: 1rem;
    inset-inline-end: 1rem;
    display: grid;
    gap: .5rem;
    z-index: 200;
    width: min(380px, calc(100% - 2rem));
  }

  .toast {
    padding: .75rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .5rem;
  }

  .detail-box {
    padding: .8rem;
    margin: .65rem 0;
  }

  .empty-tip {
    color: var(--muted);
    padding: 1rem;
    text-align: center;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
  }

  .kbd {
    display: inline-block;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: .05rem .35rem;
    background: var(--surface-alt);
  }

  .pump-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: .85rem;
  }

  .pump-card {
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
  }

  .pump-svg-wrap svg {
    max-width: 100%;
    height: auto;
    display: block;
  }

  .native-lpg-tank-widget {
    --native-level: 0;
    width: min(540px, 100%);
    margin: auto;
    padding: 1rem;
  }

  .native-lpg-cap-wrap {
    display: flex;
    justify-content: center;
    align-items: end;
    height: 2rem;
  }

  .native-lpg-cap,
  .native-lpg-cap-connector {
    background: var(--border);
    border: 1px solid var(--border);
  }

  .native-lpg-cap {
    width: 4.5rem;
    height: 1.4rem;
    border-radius: var(--radius) var(--radius) 0 0;
  }

  .native-lpg-cap-connector {
    width: .7rem;
    height: .6rem;
  }

  .native-lpg-tank {
    position: relative;
    height: 9rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
    background: var(--surface-alt);
  }

  .native-lpg-fill {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    height: calc(var(--native-level)*1%);
    background: var(--accent);
  }

  .native-lpg-percent {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-weight: 700;
  }

  .native-lpg-percent::before {
    counter-reset: level var(--native-level);
    content: counter(level) "%";
  }

  .native-lpg-soft-gloss,
  .native-lpg-surface {
    display: none;
  }

  .native-lpg-supports {
    display: flex;
    justify-content: space-around;
    padding: 0 18%;
  }

  .native-lpg-support {
    width: 3rem;
    height: 1rem;
    background: var(--border);
  }

  .permissions-card .table-wrap {
    max-width: 100%;
  }

  .perm-box {
    width: 1.1rem;
    height: 1.1rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    display: inline-grid;
    place-items: center;
    background: var(--surface);
  }

  .perm-check.on .perm-box {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }

  .cal-scrim {
    position: fixed;
    inset: 0;
    z-index: 238;
    background: transparent;
    touch-action: none;
  }

  .cal {
    position: fixed;
    width: min(380px, calc(100vw - 16px));
    padding: .62rem;
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface) 98%, var(--bg));
    border: 1px solid color-mix(in srgb, var(--border) 86%, var(--text) 7%);
    box-shadow: var(--elevated-shadow);
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
  }

  .cal.mobile-cal-modal {
    width: min(380px, calc(100vw - 20px));
    max-height: calc(100dvh - 24px);
    overflow: auto;
  }

  .cal-head,
  .cal-actions,
  .cal-time {
    justify-content: space-between;
    margin-bottom: .48rem;
    gap: .42rem;
  }

  .cal-head {
    align-items: center;
    display: grid;
    grid-template-columns: 2.15rem minmax(5.2rem, .85fr) minmax(7.2rem, 1.15fr) 2.15rem;
    width: 100%;
  }

  .cal-head>select {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    height: 2.15rem;
    min-height: 2.15rem;
    padding: .28rem .5rem;
    border-radius: 10px;
    background: transparent;
  }

  .cal-nav.icon-only {
    inline-size: 2.15rem;
    block-size: 2.15rem;
    min-height: 2.15rem;
    border-radius: 10px;
  }

  .cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: 1.3rem repeat(6, 2rem);
    gap: .22rem;
    min-height: 13.6rem;
  }

  .cal-grid>small {
    display: grid;
    place-items: center;
    color: var(--muted);
    padding: .08rem 0;
    font-size: .78rem;
  }

  .cal-grid button {
    position: relative;
    isolation: isolate;
    min-width: 0;
    width: 100%;
    min-height: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 10px;
    font-variant-numeric: tabular-nums;
    touch-action: pan-y;
  }

  .cal-empty {
    display: block;
    min-height: 2rem;
  }

  .cal-time {
    align-items: center;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    width: 100%;
  }

  .cal-time label {
    margin: 0;
    color: var(--muted);
    white-space: nowrap;
  }

  .cal-time-selects {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, 1.12fr);
    align-items: center;
    gap: .32rem;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .cal-time-selects span {
    color: var(--muted);
    font-weight: 900;
    padding-inline: .02rem;
  }

  .cal-time-selects select {
    min-width: 0;
    height: 2.15rem;
    text-align: center;
    direction: ltr;
    font-variant-numeric: tabular-nums;
  }

  .cal-time-selects select#calAmPm {
    min-width: 0;
  }

  .cal-actions {
    margin-bottom: 0;
  }

  .cal-actions button {
    flex: 1 1 auto;
    min-height: 2.18rem;
  }

@media (max-width: 390px) {
  .cal {
    width: calc(100vw - 16px);
  }

  .cal-time {
    grid-template-columns: 1fr;
  }

  .cal-time-selects {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, 1fr);
  }
}

  .date-picker-input {
    cursor: pointer;
  }

  .date-picker-mobile-lock {
    caret-color: transparent;
  }

  [dir="ltr"],
  [data-number],
  input[type="number"],
  .num,
  .ltr-field {
    direction: ltr;
    unicode-bidi: isolate;
  }

  .profit-positive {
    color: var(--success);
  }

  .profit-negative {
    color: var(--danger);
  }

  .warn,
  .partner-warning {
    color: var(--warning);
  }

  .danger-zone {
    border-color: var(--danger);
  }

  .profile-card,
  .prefs-row,
  .partner-summary-grid,
  .partner-transfer-grid,
  .partner-form-grid {
    display: grid;
    gap: .85rem;
  }

  .prefs-row,
  .partner-summary-grid,
  .partner-transfer-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  .avatar-preview,
  .avatar-big-preview {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: var(--surface-alt);
  }

  .avatar-big-preview {
    width: 10rem;
    height: 10rem;
  }

  option {
    background: var(--surface);
    color: var(--text);
  }

@media (max-width:900px) {
  :root {
    --side: 288px;
  }

  html.side-collapsed {
    --side: 288px;
  }

  .desktop-only {
    display: none;
  }

  .mobile-only {
    display: inline-flex;
  }

  .side-collapsed .nav-label,
  .side-collapsed .uinfo,
  .side-collapsed .footer-name {
    display: initial;
  }

  .sidebar,
  .side-collapsed .sidebar {
    width: min(86vw, var(--side));
    max-width: min(86vw, var(--side));
    padding: .75rem;
    transform: translateX(105%);
    transition: transform .2s ease;
  }

  html[dir="ltr"] .sidebar {
    transform: translateX(-105%);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .side-collapsed .nav button {
    justify-content: flex-start;
    padding-inline: .65rem;
  }

  .mobile-overlay.open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 25;
    background: rgba(0, 0, 0, .35);
  }

  .main,
  html[dir="ltr"] .main {
    margin: 0;
    max-width: 100%;
    padding: .75rem;
  }

  .topbar {
    gap: .6rem;
  }

  .topbar-actions,
  .topbar-page-actions {
    width: 100%;
    justify-content: space-between;
  }

  .cols2,
  .cols3,
  .cols4 {
    grid-template-columns: 1fr;
  }

  .card {
    padding: .85rem;
  }

  .modal,
  .quick-modal {
    padding: .5rem;
    align-items: start;
  }

  .modal-card,
  .quick-modal-card {
    max-height: 96vh;
  }

  .table-tools {
    gap: .6rem;
  }

  .filter-row,
  .table-export-actions,
  .pager-actions {
    width: 100%;
  }

  .filter-row .table-filter,
  .table-export-actions button,
  .pager-actions button {
    flex: 1 1 auto;
  }
}

@media (max-width:640px) {
  body {
    font-size: 14px;
  }

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

  .topbar-actions,
  .topbar-page-actions,
  .table-tools,
  .filter-row,
  .table-export-actions,
  .actions {
    align-items: stretch;
  }

  button {
    padding: .48rem .65rem;
  }

  .cell-inner {
    max-width: 18rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal;
  }

  .table-scroll-y {
    max-height: none;
  }

  .table-wrap {
    border: 1px solid var(--border);
    background: var(--surface);
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
  }

  table.data-table {
    width: 100%;
    min-width: var(--tbl-min, 720px);
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: auto;
  }

  table.data-table thead {
    position: static;
    inline-size: auto;
    block-size: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    border: 0;
  }

  table.data-table tbody {
    display: table-row-group;
    width: auto;
  }

  table.data-table tfoot {
    display: table-footer-group;
    width: auto;
  }

  table.data-table tr {
    display: table-row;
    width: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
  }

  table.data-table td,
  table.data-table th {
    display: table-cell;
    width: auto;
    min-width: inherit;
    border-bottom: 1px solid var(--border);
    background: transparent;
  }

  table.data-table th {
    background: var(--surface-alt);
  }

  table.data-table tfoot td {
    background: var(--surface-alt);
  }

  table.data-table td::before,
  table.data-table tfoot td::before {
    content: none;
    display: none;
  }

  th,
  td {
    padding: .58rem .7rem;
  }

  .toast-stack {
    inset-inline: .5rem;
    width: auto;
  }
}

  html[dir="rtl"] body {
    text-align: right;
  }

  html[dir="ltr"] body {
    text-align: left;
  }

  input,
  select,
  textarea,
  button {
    text-align: start;
  }

  select {
    direction: inherit;
  }

  .main {
    --main-pad: 1rem;
    padding: var(--main-pad);
  }

  .topbar {
    position: sticky;
    inset-block-start: 0;
    z-index: 80;
    margin: calc(var(--main-pad) * -1) calc(var(--main-pad) * -1) 1rem;
    padding: calc(.65rem + env(safe-area-inset-top, 0px)) var(--main-pad) .75rem;
    background: color-mix(in srgb, var(--bg) 96%, transparent);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .02);
    flex-wrap: nowrap;
    align-items: center;
  }

  .topbar-title-block {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: .6rem;
    row-gap: .05rem;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
  }

  .topbar-title-block>.sidebar-open-btn {
    grid-row: 1 / span 2;
    grid-column: 1;
  }

  .topbar-title-block>#pageTitle {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.35;
  }

  .topbar-title-block>#todayLine {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .86rem;
  }

  .topbar-actions {
    flex: 0 0 auto;
    margin-inline-start: .6rem;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    min-width: 0;
  }

  .topbar-page-actions {
    flex-wrap: nowrap;
    min-width: 0;
  }

  .topbar-action-btn {
    max-width: 13rem;
  }

  .topbar-action-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar-menu {
    z-index: 130;
  }

  .sidebar {
    z-index: 120;
  }

  .mobile-overlay.open {
    z-index: 110;
  }

  body.sidebar-open {
    overflow: hidden;
  }

  html[dir="rtl"] .topbar-menu {
    inset-inline-end: 0;
    inset-inline-start: auto;
  }

  html[dir="ltr"] .topbar-menu {
    inset-inline-start: auto;
    inset-inline-end: 0;
  }

@media (max-width:900px) {
  .main,
  html[dir="ltr"] .main {
    --main-pad: .75rem;
    padding: var(--main-pad);
  }

  .topbar {
    gap: .5rem;
    flex-direction: row;
    align-items: center;
  }

  .topbar-actions,
  .topbar-page-actions {
    width: auto;
    justify-content: flex-end;
    align-items: center;
  }

  .topbar-page-actions {
    overflow: visible;
  }

  .topbar-menu-wrap {
    flex: 0 0 auto;
  }

  .sidebar,
  .side-collapsed .sidebar {
    align-items: stretch;
  }

  .side-collapsed .top-user {
    width: 100%;
    justify-content: flex-start;
    padding: .65rem;
    border-color: var(--border);
    background: var(--surface);
  }

  .side-collapsed .nav {
    width: 100%;
    align-items: stretch;
  }

  .side-collapsed .nav button {
    width: 100%;
    height: auto;
    min-height: 2.55rem;
    padding: .5rem .65rem;
    border-radius: var(--radius);
    justify-content: flex-start;
  }

  .side-collapsed .nav-icon {
    margin: 0;
  }

  .side-collapsed .side-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width:640px) {
  .topbar {
    flex-direction: row;
    align-items: center;
  }

  .topbar-title-block {
    grid-template-columns: auto minmax(0, 1fr);
    flex: 1 1 auto;
  }

  .topbar-actions,
  .topbar-page-actions {
    align-items: center;
  }

  .topbar-action-btn {
    inline-size: 2.45rem;
    block-size: 2.45rem;
    padding: 0;
  }

  .topbar-action-btn span {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .topbar-menu {
    position: fixed;
    inset-block-start: calc(3.8rem + env(safe-area-inset-top, 0px));
    inset-inline-end: .75rem;
    inset-inline-start: auto;
    max-width: calc(100vw - 1.5rem);
  }

  html[dir="ltr"] .topbar-menu {
    inset-inline-start: .75rem;
    inset-inline-end: auto;
  }

  .sidebar,
  .side-collapsed .sidebar {
    width: min(92vw, var(--side));
    max-width: min(92vw, var(--side));
  }
}

  :root {
    --topbar-h: 4.35rem;
  }

  .field .field-label,
  .field-label {
    display: block;
    margin-bottom: .25rem;
    color: var(--muted);
  }

  .app {
    isolation: isolate;
  }

@media (max-width:900px) {
  :root {
    --topbar-h: 4.15rem;
  }
}

@media (max-width:640px) {
  :root {
    --topbar-h: 3.95rem;
  }

  .topbar-title-block>#pageTitle,
  .topbar-title-block>#todayLine {
    max-inline-size: 100%;
  }
}

  :root {
    --cgpt-btn-bg: transparent;
    --cgpt-hover-bg: rgba(13, 13, 13, .075);
    --cgpt-hover-bg-strong: rgba(13, 13, 13, .105);
    --cgpt-pressed-bg: rgba(13, 13, 13, .145);
    --cgpt-selected-bg: rgba(13, 13, 13, .112);
    --cgpt-selected-hover-bg: rgba(13, 13, 13, .155);
    --cgpt-hover-border: rgba(13, 13, 13, .105);
    --cgpt-pressed-border: rgba(13, 13, 13, .16);
    --cgpt-icon-muted: color-mix(in srgb, var(--text) 78%, var(--muted));
    --cgpt-danger-soft: color-mix(in srgb, var(--danger) 10%, transparent);
    --cgpt-success-soft: color-mix(in srgb, var(--success) 10%, transparent);
    --cgpt-warning-soft: color-mix(in srgb, var(--warning) 11%, transparent);
    --cgpt-focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent);
    --cgpt-hover-shadow: inset 0 0 0 1px var(--cgpt-hover-border), 0 1px 2px rgba(0, 0, 0, .04);
    --cgpt-pressed-shadow: inset 0 0 0 1px var(--cgpt-pressed-border);
    --elevated-shadow: 0 12px 34px rgba(0, 0, 0, .13), 0 2px 9px rgba(0, 0, 0, .08);
    --soft-shadow: 0 8px 24px rgba(0, 0, 0, .08), 0 1px 4px rgba(0, 0, 0, .05);
  }

  html[data-theme="dark"] {
    --cgpt-hover-bg: rgba(255, 255, 255, .092);
    --cgpt-hover-bg-strong: rgba(255, 255, 255, .125);
    --cgpt-pressed-bg: rgba(255, 255, 255, .17);
    --cgpt-selected-bg: rgba(255, 255, 255, .115);
    --cgpt-selected-hover-bg: rgba(255, 255, 255, .165);
    --cgpt-hover-border: rgba(255, 255, 255, .09);
    --cgpt-pressed-border: rgba(255, 255, 255, .16);
    --cgpt-icon-muted: color-mix(in srgb, var(--text) 86%, var(--muted));
    --cgpt-hover-shadow: inset 0 0 0 1px var(--cgpt-hover-border), 0 1px 2px rgba(0, 0, 0, .20);
    --cgpt-pressed-shadow: inset 0 0 0 1px var(--cgpt-pressed-border);
    --elevated-shadow: 0 18px 45px rgba(0, 0, 0, .45), 0 2px 10px rgba(0, 0, 0, .35);
    --soft-shadow: 0 14px 34px rgba(0, 0, 0, .32), 0 1px 5px rgba(0, 0, 0, .25);
  }

  button,
  .clickable,
  .clickrow,
  .avatar-clickable,
  .perm-check {
    -webkit-tap-highlight-color: transparent;
  }

  button {
    border-radius: 10px;
    transition: background-color .13s ease, border-color .13s ease, color .13s ease, box-shadow .13s ease, transform .08s ease, opacity .13s ease;
    will-change: background-color, transform;
  }

  html body button:not(.red):not(.danger):not(.warn):not(.green) {
    font-weight: 620;
  }

  html body button:not(.red):not(.danger):not(.warn):not(.green):active:not(:disabled) {
    transform: translateY(1px) scale(.982);
  }

  html body button:focus-visible,
  html body .clickable:focus-visible,
  html body .clickrow:focus-visible,
  html body .avatar-clickable:focus-visible {
    outline: none;
  }

  html body button:disabled {
    opacity: .45;
    cursor: not-allowed;
  }

  html body .sidebar .nav {
    gap: .16rem;
  }

  html body .sidebar .nav button,
  html body .side-collapsed .sidebar .nav button {
    min-height: 2.48rem;
    padding: .52rem .62rem;
    border-radius: 10px;
    gap: .68rem;
    justify-content: flex-start;
  }

  html body .sidebar .nav button:active:not(:disabled),
  html body .side-collapsed .sidebar .nav button:active:not(:disabled) {
    transform: translateY(1px) scale(.985);
  }

  html body .sidebar .nav button.active,
  html body .side-collapsed .sidebar .nav button.active {
    font-weight: 760;
  }

  html body .side-collapsed .sidebar .nav button {
    justify-content: center;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
  }

  html body .nav-icon,
  html body .app-icon-inline,
  html body .btn-icon,
  html body .inline-icon {
    color: var(--cgpt-icon-muted);
    transition: transform .13s ease, opacity .13s ease, color .13s ease;
  }

  html body .sidebar .nav button:hover .nav-icon,
  html body button:hover .btn-icon,
  html body button:hover .inline-icon,
  html body button:hover .app-icon-inline {
    color: var(--text);
    transform: scale(1.06);
  }

  html body .sidebar .nav button.active .nav-icon {
    color: var(--text);
  }

  html body button.green {
    font-weight: 680;
  }

  html body button.green:active:not(:disabled) {
    transform: translateY(1px) scale(.982);
  }

  html body button.red,
  html body button.danger {
    font-weight: 680;
  }

  html body button.red:active:not(:disabled),
  html body button.danger:active:not(:disabled) {
    transform: translateY(1px) scale(.982);
  }

  html body button.warn {
    font-weight: 680;
  }

  html body button.warn:active:not(:disabled) {
    transform: translateY(1px) scale(.982);
  }

  html body .perm-check:active {
    transform: translateY(1px) scale(.982);
  }

  html body .perm-check.on .perm-box,
  html body .perm-box.on {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }

  .clickable,
  tr.clickrow,
  .avatar-clickable {
    transition: background-color .13s ease, box-shadow .13s ease, transform .08s ease;
  }

  .card.clickable:hover,
  .avatar-clickable:hover {
    box-shadow: var(--soft-shadow), inset 0 0 0 1px var(--cgpt-hover-border);
    transform: translateY(-1px);
  }

  .card.clickable:active,
  .avatar-clickable:active {
    transform: translateY(0) scale(.992);
  }

  .topbar-menu {
    border-radius: 14px;
    box-shadow: var(--elevated-shadow);
    transform-origin: top right;
    animation: menuPop .14s ease both;
    background: color-mix(in srgb, var(--surface) 98%, var(--bg));
    border-color: var(--border-strong);
  }

  .topbar-menu-status {
    padding: .35rem .4rem .55rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: .45rem;
  }

  .topbar-menu-section {
    display: grid;
    gap: .55rem;
    padding: .15rem 0 .55rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: .45rem;
  }

  .topbar-pref-row {
    display: grid;
    gap: .28rem;
  }

  .topbar-pref-label {
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.25;
    padding-inline: .1rem;
  }

  .topbar-pref-row select {
    width: 100%;
    min-height: 2.35rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    padding: .35rem .6rem;
    outline: 0;
  }

  .topbar-pref-row select:hover {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  }

  .topbar-pref-row select:focus {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
  }

  .topbar-menu-item {
    width: 100%;
    border-radius: 10px;
    padding: .62rem .7rem;
  }

  .danger-menu-item {
    color: var(--danger);
  }

  .toast {
    border-radius: 16px;
    padding: .85rem .9rem;
    box-shadow: var(--elevated-shadow);
    background: color-mix(in srgb, var(--surface) 98%, var(--bg));
    border-color: var(--border-strong);
    align-items: start;
    animation: toastIn .18s ease both;
    border-inline-start: 4px solid var(--accent);
  }

  .toast.success {
    border-inline-start-color: var(--success);
  }

  .toast.error {
    border-inline-start-color: var(--danger);
  }

  .toast.info {
    border-inline-start-color: var(--accent);
  }

  .toast-icon {
    width: 1.9rem;
    height: 1.9rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--cgpt-hover-bg);
  }

  .toast-close {
    width: 2rem;
    height: 2rem;
    min-height: 2rem;
    padding: 0;
    border-radius: 999px;
  }

  .toast small {
    color: var(--text);
    opacity: .86;
  }

  .modal,
  .quick-modal,
  .avatar-lightbox {
    background: rgba(0, 0, 0, .52);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  .modal-card,
  .quick-modal-card,
  .avatar-lightbox-card {
    border-radius: 18px;
    box-shadow: var(--elevated-shadow);
  }

  body.modal-open .topbar,
  body.modal-open .topbar-menu,
  body.cal-lock .topbar-menu {
    pointer-events: none;
  }

  .app-tooltip {
    position: fixed;
    z-index: 500;
    max-width: min(320px, calc(100vw - 16px));
    padding: .42rem .6rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface) 96%, var(--bg));
    color: var(--text);
    border: 1px solid var(--border);
    font-size: .82rem;
    line-height: 1.35;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12), 0 2px 7px rgba(0, 0, 0, .06);
    opacity: 0;
    transform: translateY(2px) scale(.98);
    transition: opacity .12s ease, transform .12s ease;
    pointer-events: none;
    text-align: start;
    direction: inherit;
    backdrop-filter: blur(10px) saturate(1.08);
    -webkit-backdrop-filter: blur(10px) saturate(1.08);
  }

  html[data-theme="dark"] .app-tooltip {
    background: color-mix(in srgb, var(--surface) 92%, #000);
    color: var(--text);
    border-color: var(--border-strong);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .38), 0 2px 8px rgba(0, 0, 0, .24);
  }

  .app-tooltip.show {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

@media (max-width: 640px) {
  .pager-actions .btn-mini {
    flex: 0 0 2.45rem;
  }

  .topbar-action-btn.icon-only {
    inline-size: 2.45rem;
    block-size: 2.45rem;
  }
}

  html body .sidebar .nav button,
  html body .side-collapsed .sidebar .nav button {
    position: relative;
    overflow: hidden;
  }

  html body .sidebar .nav button.active,
  html body .side-collapsed .sidebar .nav button.active {
    font-weight: 780;
  }

  html body .sidebar .nav button.active::before,
  html body .side-collapsed .sidebar .nav button.active::before {
    content: "";
    position: absolute;
    inset-inline-start: .22rem;
    top: 50%;
    width: 3px;
    height: 58%;
    transform: translateY(-50%);
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent);
    opacity: .98;
  }

  html body .sidebar .nav button.active .nav-icon,
  html body .side-collapsed .sidebar .nav button.active .nav-icon,
  html body .sidebar .nav button.active .nav-label {
    opacity: 1;
  }

  html body .cal .cal-grid button {
    position: relative;
    isolation: isolate;
    font-variant-numeric: tabular-nums;
  }

  html body .cal .cal-grid button:active:not(:disabled) {
    transform: translateY(1px) scale(.982);
  }

  html body .cal .cal-grid button.today::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: .18rem;
    width: .32rem;
    height: .32rem;
    transform: translateX(-50%);
    border-radius: 999px;
    background: var(--success);
    box-shadow: 0 0 0 2px var(--surface);
    pointer-events: none;
    z-index: 3;
  }

  html body .cal .cal-grid button.today:not(.sel):not([aria-selected="true"]):not([data-selected="true"]) {
    font-weight: 820;
  }

  html body .cal .cal-grid button.focus-day:not(.sel):not([aria-selected="true"]):not([data-selected="true"]) {
    font-weight: 840;
  }

  .grid.stack-tables,
  .grid.cols2.stack-tables,
  .grid.cols3.stack-tables,
  .grid.cols4.stack-tables {
    grid-template-columns: minmax(0, 1fr);
  }

  .data-table-shell {
    width: 100%;
    display: grid;
    gap: .62rem;
    contain: layout paint;
  }

  .data-table-shell .table-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 0;
  }

  .data-table-shell .filter-row {
    flex: 1 1 24rem;
    min-width: min(100%, 18rem);
    display: flex;
    align-items: center;
    gap: .7rem;
    flex-wrap: wrap;
  }

  .data-table-shell .table-title-box {
    min-width: 10rem;
    max-width: 100%;
    display: grid;
    gap: .08rem;
    align-content: center;
  }

  .data-table-shell .table-title {
    font-size: 1rem;
    line-height: 1.35;
    font-weight: 850;
    color: var(--text);
  }

  .data-table-shell .table-subtitle {
    min-height: 1.05rem;
    color: var(--muted);
    font-size: .79rem;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
  }

  .data-table-shell .table-filter-box {
    flex: 1 1 18rem;
    min-width: min(100%, 15rem);
    max-width: min(100%, 28rem);
    height: 2.45rem;
    min-height: 2.45rem;
    display: flex;
    align-items: center;
    gap: .45rem;
    padding-inline: .62rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--surface) 97%, var(--bg));
    transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
  }

  .data-table-shell .table-filter-box:focus-within,
  .data-table-shell .table-filter-box:hover {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
    background: var(--surface);
  }

  .data-table-shell .table-filter-box .inline-icon {
    color: var(--muted);
    inline-size: 1.05rem;
    block-size: 1.05rem;
    flex-basis: 1.05rem;
  }

  .data-table-shell .table-filter-box .table-filter {
    width: 100%;
    height: 2.25rem;
    min-height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    outline: 0;
  }

  .data-table-shell .table-filter::placeholder {
    color: color-mix(in srgb, var(--muted) 82%, transparent);
    opacity: 1;
  }

  .data-table-shell .table-export-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .45rem;
    flex-wrap: wrap;
  }

  .data-table-shell .table-export-actions button {
    min-height: 2.42rem;
    white-space: nowrap;
  }

  .data-table-shell .table-wrap {
    width: 100%;
    direction: rtl;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    scrollbar-gutter: stable;
    padding-inline: .45rem;
  }

  .data-table-shell .table-wrap[data-chat-scroll="1"] {
    overflow-y: auto;
    overscroll-behavior-block: contain;
    scroll-behavior: auto;
    overflow-anchor: auto;
  }

  .data-table-shell .table-wrap[data-chat-scroll="1"] tbody {
    overflow-anchor: auto;
  }

  .data-table-shell .table-wrap[data-chat-scroll="1"][data-has-more-rows="1"] {
    scroll-padding-block-end: 4rem;
  }

  html.two-finger-table-scroll-live .data-table-shell .table-wrap {
    scroll-behavior: auto;
  }

  .data-table-shell .table-wrap.table-compact {
    height: clamp(14rem, 36vh, 23rem);
  }

  .data-table-shell .table-wrap.table-medium {
    height: clamp(18rem, 48vh, 31rem);
  }

  .data-table-shell .table-wrap.table-wide {
    height: clamp(20rem, 56vh, 36rem);
  }

  .data-table-shell table.data-table {
    direction: rtl;
    width: 100%;
    min-width: max(100%, var(--tbl-min, 720px));
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
  }

  .data-table-shell table.data-table th,
  .data-table-shell table.data-table td {
    height: 46px;
    min-height: 46px;
    padding: .52rem .68rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--border);
    background-clip: padding-box;
  }

  .data-table-shell table.data-table th:first-child,
  .data-table-shell table.data-table td:first-child {
    padding-inline-start: 1rem;
    padding-inline-end: .75rem;
  }

  .data-table-shell table.data-table thead th {
    position: sticky;
    inset-block-start: 0;
    z-index: 3;
    background: color-mix(in srgb, var(--surface-alt) 96%, var(--surface));
    box-shadow: 0 1px 0 var(--border);
  }

  .data-table-shell table.data-table tfoot td {
    position: sticky;
    inset-block-end: 0;
    z-index: 2;
    background: color-mix(in srgb, var(--surface-alt) 96%, var(--surface));
    box-shadow: 0 -1px 0 var(--border);
  }

  .data-table-shell table.data-table tbody tr {
    height: 46px;
    transition: background-color .12s ease, box-shadow .12s ease;
  }

  .data-table-shell table.data-table tbody tr:hover,
  .data-table-shell table.data-table tbody tr.clickrow:hover {
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
    box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--accent) 4%, transparent);
  }

  html[data-theme="dark"] .data-table-shell table.data-table tbody tr:hover,
  html[data-theme="dark"] .data-table-shell table.data-table tbody tr.clickrow:hover {
    background: color-mix(in srgb, var(--accent) 13%, var(--surface));
  }

  .data-table-shell table.data-table .cell-inner {
    max-width: 34rem;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .data-table-shell table.data-table td:last-child .cell-inner,
  .data-table-shell table.data-table th:last-child .cell-inner {
    max-width: 42rem;
  }

  .data-table-shell .audit-note {
    display: inline-block;
    min-width: 9rem;
    line-height: 1.35;
    color: var(--muted);
    white-space: normal;
  }

  .data-table-shell .footer-stack {
    display: grid;
    gap: .08rem;
    white-space: normal;
    line-height: 1.18;
    font-variant-numeric: tabular-nums;
    min-width: 4.6rem;
  }

  .data-table-shell .footer-stack span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .28rem;
    min-width: 0;
  }

  .data-table-shell .footer-stack span:first-child {
    color: var(--text);
  }

  .data-table-shell .footer-stack span:last-child {
    color: var(--muted);
    font-size: .88em;
  }

  .data-table-shell .footer-stack small {
    color: var(--muted);
    font-size: .74em;
    font-weight: 700;
    white-space: nowrap;
  }

  .data-table-shell .footer-stack b {
    direction: ltr;
    unicode-bidi: isolate;
    font-weight: 800;
    text-align: center;
  }

  .data-table-shell .pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: 0;
    padding-top: .08rem;
  }

  .data-table-shell .pager-info {
    color: var(--muted);
    font-size: .86rem;
    font-variant-numeric: tabular-nums;
  }

  .data-table-shell .pager-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .35rem;
    flex-wrap: nowrap;
  }

  .data-table-shell .pager-actions .btn-mini.icon-only {
    inline-size: 2.35rem;
    block-size: 2.35rem;
    min-height: 2.35rem;
    padding: 0;
    display: inline-grid;
    place-items: center;
    flex: 0 0 2.35rem;
  }

  .data-table-shell .pager-size {
    margin: 0;
    min-height: 2.35rem;
    flex: 0 0 auto;
  }

  .data-table-shell .pager-size select {
    width: auto;
    min-width: 4.3rem;
    min-height: 2.35rem;
    padding-block: .25rem;
  }

@media (max-width: 900px) {
  .data-table-shell .table-tools {
    flex-direction: column;
    align-items: stretch;
    gap: .55rem;
  }

  .data-table-shell .filter-row {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: .45rem;
  }

  .data-table-shell .table-title-box {
    width: 100%;
    min-width: 0;
    min-height: 0;
    align-content: start;
  }

  .data-table-shell .table-subtitle {
    min-height: 0;
  }

  .data-table-shell .table-filter-box {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 2.55rem;
    min-height: 2.55rem;
  }

  .data-table-shell .table-filter-box .table-filter {
    height: 2.3rem;
    min-height: 2.3rem;
    line-height: 2.3rem;
  }

  .data-table-shell .table-export-actions {
    width: 100%;
  }

  .data-table-shell .table-export-actions button {
    flex: 1 1 8rem;
    justify-content: center;
  }

  .data-table-shell .table-wrap.table-compact,
  .data-table-shell .table-wrap.table-medium,
  .data-table-shell .table-wrap.table-wide {
    height: clamp(15rem, 54vh, 30rem);
  }
}

@media (max-width: 640px) {
  .data-table-shell table.data-table .cell-inner {
    max-width: 18rem;
  }

  .data-table-shell .table-export-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .data-table-shell .pager {
    justify-content: center;
  }

  .data-table-shell .pager-info {
    width: 100%;
    text-align: center;
  }

  .data-table-shell .pager-actions {
    width: 100%;
    justify-content: center;
  }

  .data-table-shell .pager-actions .btn-mini.icon-only {
    inline-size: 2.45rem;
    block-size: 2.45rem;
    flex-basis: 2.45rem;
  }

  .data-table-shell .pager-size select {
    min-width: 4.1rem;
  }
}

  .brand-logo-img {
    width: 3.25rem;
    height: 3.25rem;
    object-fit: contain;
    border-radius: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: .22rem;
    box-shadow: 0 8px 22px color-mix(in srgb,#000 10%,transparent);
  }

  .sidebar-brand-logo {
    flex: 0 0 auto;
  }

  .sidebar-brand-text {
    display: grid;
    gap: .08rem;
    min-width: 0;
  }

  .sidebar-brand-text b,
  .sidebar-brand-text small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .top-profile-btn {
    inline-size: 2.45rem;
    block-size: 2.45rem;
  }

  .top-profile-btn:hover {
    transform: translateY(-1px);
  }

  .top-profile-avatar,
  .top-profile-avatar .avatar,
  .top-profile-avatar img,
  .top-profile-avatar .avatar-img {
    object-fit: cover;
  }

  .top-profile-avatar {
    display: inline-grid;
    place-items: center;
    outline: 2px solid var(--success);
    outline-offset: 2px;
    overflow: visible;
  }

  .top-profile-btn.offline .top-profile-avatar,
  .top-profile-btn.offline .top-profile-avatar * {
    filter: grayscale(1);
    opacity: .78;
  }

  .top-profile-btn.offline .top-profile-avatar {
    outline-color: var(--border-strong);
  }

  .top-profile-btn.pending-sync {
    position: relative;
  }

  .top-profile-btn.pending-sync::after {
    content: attr(data-pending-count);
    position: absolute;
    inset-block-start: -.35rem;
    inset-inline-end: -.35rem;
    min-inline-size: 1.25rem;
    block-size: 1.25rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #f59e0b;
    color: #111827;
    border: 2px solid var(--surface);
    font-size: .72rem;
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  tr.pending-sync {
    background: color-mix(in srgb,#f59e0b 10%,var(--surface));
  }

  tr.pending-sync-failed {
    background: color-mix(in srgb,var(--danger) 10%,var(--surface));
  }

  .pending-sync-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-inline-end: .4rem;
    padding: .16rem .5rem;
    border-radius: 999px;
    background: color-mix(in srgb,#f59e0b 18%,var(--surface));
    border: 1px solid color-mix(in srgb,#f59e0b 55%,var(--border));
    color: color-mix(in srgb,#f59e0b 42%,var(--text));
    font-size: .78rem;
    font-weight: 800;
    white-space: nowrap;
  }

  .pending-sync-badge.failed {
    background: color-mix(in srgb,var(--danger) 14%,var(--surface));
    border-color: color-mix(in srgb,var(--danger) 55%,var(--border));
    color: color-mix(in srgb,var(--danger) 38%,var(--text));
  }

  .theme-toggle-btn {
    inline-size: 2.45rem;
    block-size: 2.45rem;
  }

  .theme-toggle-btn:hover {
    transform: translateY(-1px) rotate(-4deg);
  }

  .theme-icon {
    font-size: 1.22rem;
    line-height: 1;
    display: inline-block;
    transform-origin: center;
  }

  .theme-icon.sun {
    color: #d97706;
  }

  .theme-icon.moon {
    color: #93c5fd;
  }

  .modal,
  .quick-modal,
  .avatar-lightbox {
    backdrop-filter: blur(8px) saturate(1.05);
  }

  .modal-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb,var(--surface) 92%,var(--surface-alt));
  }

  .modal-head h3 {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.4;
  }

  .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 1rem;
  }

  .modal-footer {
    flex: 0 0 auto;
    display: none;
    align-items: center;
    justify-content: flex-end;
    gap: .55rem;
    padding: .78rem 1rem;
    border-top: 1px solid var(--border);
    background: color-mix(in srgb,var(--surface) 92%,var(--surface-alt));
  }

  .quick-modal-card .modal-footer {
    display: flex;
  }

  .export-scope-box {
    display: grid;
    gap: .55rem;
    margin: .8rem 0 1rem;
  }

  .export-scope-box label {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .78rem .85rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--surface-alt);
    cursor: pointer;
    transition: background .18s ease,border-color .18s ease,transform .18s ease;
  }

  .export-scope-box label:hover {
    background: var(--surface-hover);
    transform: translateY(-1px);
  }

  .export-scope-box input {
    inline-size: 1.1rem;
    block-size: 1.1rem;
    accent-color: var(--accent);
  }

  .export-scope-box span {
    display: grid;
    gap: .05rem;
  }

  .export-scope-box small {
    color: var(--muted);
  }

  .logo-preview {
    inline-size: 5.5rem;
    block-size: 5.5rem;
    border-radius: 1.25rem;
    border: 1px solid var(--border);
    background: var(--surface-alt);
    display: grid;
    place-items: center;
    overflow: hidden;
    margin-bottom: .55rem;
  }

  .logo-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    padding: .35rem;
  }

  .brand-settings-card .avatar-picker {
    align-items: flex-start;
  }

  .permissions-card #tblPermissions td:first-child,
  .permissions-card #tblPermissions th:first-child {
    white-space: normal;
  }

  html body .perm-check {
    position: relative;
    cursor: pointer;
  }

  html body .perm-check input {
    position: absolute;
    opacity: 0;
    inset: 0;
    cursor: pointer;
  }

  html body .perm-box {
    inline-size: 1.55rem;
    block-size: 1.55rem;
    border-radius: .55rem;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    display: inline-grid;
    place-items: center;
    transition: background .16s ease,border-color .16s ease,transform .16s ease;
  }

  html body .perm-check:hover .perm-box {
    background: var(--surface-hover);
    transform: translateY(-1px);
  }

  html body .perm-check[disabled],
  html body .perm-check input:disabled + .perm-box,
  html body .perm-check:has(input:disabled) .perm-box {
    opacity: .6;
    cursor: not-allowed;
  }

  .perm-check-icon,
  .perm-check-icon svg {
    inline-size: 1rem;
    block-size: 1rem;
    stroke-width: 2.8;
  }

  html body .perm-box .perm-check-icon {
    opacity: 0;
    transform: scale(.82);
    transition: opacity .16s ease,transform .16s ease;
  }

  html body .perm-check.on .perm-box .perm-check-icon,
  html body .perm-check:has(input:checked) .perm-box .perm-check-icon,
  html body .perm-check input:checked + .perm-box .perm-check-icon {
    opacity: 1;
    transform: scale(1);
  }

@media (max-width:640px) {
  .export-scope-box label {
    align-items: flex-start;
  }
}

  .modal-card.modal-compact {
    --modal-width: 34rem;
  }

  .modal-card.modal-medium {
    --modal-width: 44rem;
  }

  .modal-card.modal-wide {
    --modal-width: 58rem;
  }

  .modal-card.modal-xwide {
    --modal-width: 78rem;
  }

  .pump-card.pump-live {
    --pump-accent: var(--accent);
    --pump-accent-soft: color-mix(in srgb,var(--accent) 13%,transparent);
    --pump-card-top: color-mix(in srgb,var(--surface) 96%,var(--accent) 4%);
    --pump-card-bottom: color-mix(in srgb,var(--surface-alt) 92%,#000 8%);
    --pump-screen-top: color-mix(in srgb,var(--surface) 96%,#000 4%);
    --pump-screen-bottom: color-mix(in srgb,var(--surface-alt) 94%,#000 6%);
    --pump-base-top: color-mix(in srgb,var(--surface-alt) 88%,#000 12%);
    --pump-base-bottom: color-mix(in srgb,var(--surface-alt) 78%,#000 22%);
    --pump-frame: color-mix(in srgb,var(--border) 82%,var(--text) 18%);
    --pump-frame-soft: color-mix(in srgb,var(--border) 76%,transparent);
    --pump-text: var(--text);
    --pump-text-muted: var(--muted);
    --pump-muted: var(--muted);
    --pump-rule: color-mix(in srgb,var(--border) 72%,transparent);
    --pump-hose-hi: color-mix(in srgb,var(--muted) 58%,#fff 42%);
    --pump-hose-mid: color-mix(in srgb,var(--surface-alt) 64%,#000 36%);
    --pump-hose-low: color-mix(in srgb,var(--muted) 60%,#000 40%);
    --pump-shadow: color-mix(in srgb,#000 18%,transparent);
    padding: .7rem;
    border-radius: 1.45rem;
    border: 1px solid color-mix(in srgb,var(--border) 72%,transparent);
    background: radial-gradient(circle at 26% 0,color-mix(in srgb,var(--pump-accent) 10%,transparent),transparent 38%),linear-gradient(145deg,color-mix(in srgb,var(--surface) 90%,#fff 2%),color-mix(in srgb,var(--surface-alt) 82%,#000 8%));
    box-shadow: 0 18px 44px color-mix(in srgb,#000 16%,transparent),inset 0 1px 0 color-mix(in srgb,#fff 38%,transparent);
    transition: transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;
  }

  .pump-card.pump-live:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb,var(--pump-accent) 35%,var(--border));
    box-shadow: 0 22px 54px color-mix(in srgb,#000 21%,transparent),inset 0 1px 0 color-mix(in srgb,#fff 44%,transparent);
  }

  .pump-card.pump-live.is-off {
    --pump-accent: var(--muted);
    --pump-accent-soft: color-mix(in srgb,var(--muted) 14%,transparent);
    --pump-frame: color-mix(in srgb,var(--border) 75%,var(--text) 10%);
    --pump-frame-soft: color-mix(in srgb,var(--border) 74%,transparent);
    --pump-text: var(--text);
    --pump-text-muted: var(--muted);
    --pump-muted: var(--muted);
  }

  html[data-theme="dark"] .pump-card.pump-live {
    --pump-card-top: color-mix(in srgb,var(--surface) 88%,#000 12%);
    --pump-card-bottom: color-mix(in srgb,var(--bg) 82%,#000 18%);
    --pump-screen-top: color-mix(in srgb,var(--surface) 72%,#000 28%);
    --pump-screen-bottom: color-mix(in srgb,var(--bg) 82%,#000 18%);
    --pump-base-top: color-mix(in srgb,var(--surface-alt) 78%,#000 22%);
    --pump-base-bottom: color-mix(in srgb,var(--bg) 76%,#000 24%);
    --pump-frame: color-mix(in srgb,var(--border) 88%,transparent);
    --pump-frame-soft: color-mix(in srgb,var(--border) 70%,transparent);
    --pump-text: var(--text);
    --pump-text-muted: var(--muted);
    --pump-rule: color-mix(in srgb,var(--border) 68%,transparent);
    --pump-shadow: rgba(0,0,0,.40);
    background: radial-gradient(circle at 26% 0,color-mix(in srgb,var(--pump-accent) 12%,transparent),transparent 42%),linear-gradient(145deg,color-mix(in srgb,var(--surface) 88%,#000 12%),color-mix(in srgb,var(--surface-alt) 72%,#000 28%));
    border-color: color-mix(in srgb,var(--border) 76%,transparent);
    box-shadow: 0 22px 58px rgba(0,0,0,.44),inset 0 1px 0 rgba(255,255,255,.08);
  }

  .pump-card.pump-live .pump-svg-wrap {
    border-radius: 1.2rem;
    padding: .45rem;
    background: radial-gradient(circle at 50% 0,color-mix(in srgb,var(--pump-accent) 8%,transparent),transparent 46%),linear-gradient(180deg,color-mix(in srgb,var(--surface) 88%,transparent),color-mix(in srgb,var(--surface-alt) 92%,transparent));
    border: 1px solid color-mix(in srgb,var(--border) 76%,transparent);
    overflow: hidden;
  }

  .pump-card.pump-live .pump-svg-wrap svg {
    inline-size: 100%;
    block-size: auto;
    display: block;
    shape-rendering: geometricPrecision;
    text-rendering: geometricPrecision;
    overflow: visible;
    filter: drop-shadow(0 18px 22px var(--pump-shadow));
  }

  .pump-card.pump-live.is-off .pump-svg-wrap svg {
    filter: grayscale(.08) drop-shadow(0 18px 22px rgba(0,0,0,.28));
    opacity: .96;
  }

  .pump-card.pump-live .pump-ground-shadow {
    fill: rgba(0,0,0,.26);
  }

  .pump-card.pump-live .pump-body {
    stroke: color-mix(in srgb,var(--pump-accent) 88%,var(--border));
    stroke-width: 3.2;
    filter: drop-shadow(0 0 7px color-mix(in srgb,var(--pump-accent) 34%,transparent));
  }

  .pump-card.pump-live.is-off .pump-body {
    stroke: var(--pump-frame);
    filter: none;
  }

  .pump-card.pump-live .pump-body-inner {
    fill: none;
    stroke: var(--pump-frame-soft);
    stroke-width: 2.2;
  }

  .pump-card.pump-live .pump-top-shine {
    stroke: color-mix(in srgb,var(--pump-text) 18%,transparent);
    stroke-width: 2;
    stroke-linecap: round;
  }

  .pump-card.pump-live .pump-screen {
    stroke: var(--pump-frame-soft);
    stroke-width: 2.2;
  }

  .pump-card.pump-live .pump-screen-inner {
    fill: color-mix(in srgb,var(--bg) 10%,transparent);
    stroke: color-mix(in srgb,var(--border) 35%,transparent);
    stroke-width: 1;
  }

  .pump-card.pump-live .pump-label {
    font-family: "Noto Naskh Arabic","Noto Sans Arabic",Vazirmatn,"Segoe UI",Tahoma,Arial,sans-serif;
    font-size: 14.2px;
    font-weight: 900;
    fill: var(--pump-text);
    paint-order: stroke;
    stroke: rgba(0,0,0,.1);
    stroke-width: .25px;
  }

  .pump-card.pump-live .pump-sale-label {
    font-size: 16.5px;
    fill: color-mix(in srgb,var(--pump-accent) 84%,var(--pump-text) 16%);
    filter: drop-shadow(0 0 4px color-mix(in srgb,var(--pump-accent) 22%,transparent));
  }

  .pump-card.pump-live .pump-combo {
    font-family: "Segoe UI",Tahoma,Arial,sans-serif;
    font-weight: 900;
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: 0;
  }

  .pump-card.pump-live .pump-value {
    font-family: "Segoe UI",Tahoma,Arial,sans-serif;
    font-weight: 900;
    fill: var(--pump-accent);
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: 0;
  }

  .pump-card.pump-live .pump-unit {
    font-family: "Segoe UI",Tahoma,Arial,sans-serif;
    font-size: 13px;
    font-weight: 950;
    fill: var(--pump-muted);
    font-variant-numeric: tabular-nums lining-nums;
  }

  .pump-card.pump-live .pump-kgs-unit {
    font-size: 12.5px;
    letter-spacing: .1px;
    text-transform: lowercase;
  }

  .pump-card.pump-live .pump-afn-unit,
  .pump-card.pump-live .pump-dollar-unit {
    font-size: 20px;
    font-weight: 950;
    fill: var(--pump-accent);
  }

  .pump-card.pump-live .pump-sale-value {
    fill: color-mix(in srgb,var(--pump-accent) 88%,var(--pump-text) 12%);
    filter: drop-shadow(0 0 5px color-mix(in srgb,var(--pump-accent) 24%,transparent));
  }

  .pump-card.pump-live .pump-sale-unit {
    fill: color-mix(in srgb,var(--pump-accent) 86%,var(--pump-text) 14%);
    font-size: 13.5px;
    filter: drop-shadow(0 0 4px color-mix(in srgb,var(--pump-accent) 18%,transparent));
  }

  .pump-card.pump-live.is-off .pump-value {
    fill: var(--pump-text-muted);
  }

  .pump-card.pump-live.is-off .pump-unit {
    fill: var(--pump-muted);
  }

  .pump-card.pump-live.is-off .pump-afn-unit,
  .pump-card.pump-live.is-off .pump-dollar-unit {
    fill: var(--pump-muted);
  }

  .pump-card.pump-live.is-off .pump-sale-label {
    fill: var(--pump-text-muted);
    filter: none;
  }

  .pump-card.pump-live.is-off .pump-sale-value {
    fill: var(--pump-text-muted);
    filter: none;
  }

  .pump-card.pump-live.is-off .pump-sale-unit {
    fill: var(--pump-muted);
    filter: none;
  }

  .pump-card.pump-live .pump-rule {
    stroke: var(--pump-rule);
    stroke-width: 1.6;
    stroke-linecap: round;
  }

  .pump-card.pump-live .pump-name {
    font-weight: 950;
    fill: var(--pump-text);
    paint-order: stroke;
    stroke: rgba(0,0,0,.22);
    stroke-width: 1.1px;
    letter-spacing: 0;
  }

  .pump-card.pump-live .pump-name-underline {
    stroke: var(--pump-accent);
    stroke-width: 4.6;
    stroke-linecap: round;
    filter: drop-shadow(0 0 7px color-mix(in srgb,var(--pump-accent) 52%,transparent));
  }

  .pump-card.pump-live.is-off .pump-name-underline {
    stroke: color-mix(in srgb,var(--muted) 58%,transparent);
    filter: none;
  }

  .pump-card.pump-live .pump-flame-circle {
    fill: var(--pump-accent-soft);
    stroke: var(--pump-accent);
    stroke-width: 2.2;
  }

  .pump-card.pump-live .pump-flame {
    fill: var(--pump-accent);
  }

  .pump-card.pump-live.is-off .pump-flame-circle {
    fill: color-mix(in srgb,var(--muted) 12%,transparent);
    stroke: color-mix(in srgb,var(--muted) 42%,transparent);
  }

  .pump-card.pump-live.is-off .pump-flame {
    fill: var(--pump-muted);
  }

  .pump-card.pump-live .pump-lpg-text {
    font-size: 29px;
    font-weight: 950;
    fill: var(--pump-text);
    letter-spacing: .5px;
    paint-order: stroke;
    stroke: rgba(0,0,0,.22);
    stroke-width: .7px;
  }

  .pump-card.pump-live .pump-employee-pill rect {
    fill: color-mix(in srgb,var(--pump-accent) 10%,var(--surface) 90%);
    stroke: color-mix(in srgb,var(--pump-accent) 70%,var(--border));
    stroke-width: 1.85;
    filter: drop-shadow(0 6px 12px color-mix(in srgb,#000 12%,transparent));
  }

  .pump-card.pump-live.is-off .pump-employee-pill rect {
    fill: color-mix(in srgb,var(--muted) 8%,var(--surface) 92%);
    stroke: color-mix(in srgb,var(--muted) 38%,var(--border));
  }

  html[data-theme="dark"] .pump-card.pump-live .pump-employee-pill rect {
    fill: color-mix(in srgb,var(--pump-accent) 16%,var(--surface) 84%);
  }

  html[data-theme="dark"] .pump-card.pump-live.is-off .pump-employee-pill rect {
    fill: color-mix(in srgb,var(--muted) 10%,var(--surface) 90%);
  }

  .pump-card.pump-live .pump-employee-pill text {
    font-weight: 900;
    fill: var(--pump-text);
    letter-spacing: 0;
    paint-order: stroke;
    stroke: rgba(0,0,0,.14);
    stroke-width: .35px;
  }

  .pump-card.pump-live .pump-base {
    stroke: color-mix(in srgb,var(--border) 45%,transparent);
    stroke-width: 1.5;
  }

  .pump-card.pump-live .pump-base-lip {
    stroke: color-mix(in srgb,var(--border) 70%,var(--muted) 30%);
    stroke-width: 8;
    stroke-linecap: round;
  }

  .pump-card.pump-live .pump-status-dot {
    fill: var(--pump-accent);
    stroke: rgba(255,255,255,.16);
    stroke-width: 3;
  }

  .pump-card.pump-live .pump-status-text {
    font-size: 28px;
    font-weight: 950;
    fill: var(--pump-accent);
    letter-spacing: 0;
    paint-order: stroke;
    stroke: rgba(0,0,0,.18);
    stroke-width: .65px;
  }

  .pump-card.pump-live.is-off .pump-status-dot {
    fill: var(--pump-muted);
    filter: none;
  }

  .pump-card.pump-live.is-off .pump-status-text {
    fill: var(--pump-muted);
  }

  .pump-card.pump-live .pump-side-socket,
  .pump-card.pump-live .pump-hose-neck,
  .pump-card.pump-live .pump-hose-front,
  .pump-card.pump-live .pump-hose-back {
    fill: none;
    stroke-linecap: round;
  }

  .pump-card.pump-live .pump-hose-back {
    stroke: rgba(0,0,0,.42);
    stroke-width: 29;
  }

  .pump-card.pump-live .pump-nozzle-body {
    fill: color-mix(in srgb,var(--surface-alt) 70%,#000 30%);
    stroke: color-mix(in srgb,var(--border) 68%,transparent);
    stroke-width: 2.4;
  }

  .pump-card.pump-live .pump-nozzle-hole {
    fill: color-mix(in srgb,var(--bg) 70%,#000 30%);
    stroke: color-mix(in srgb,var(--border) 32%,transparent);
    stroke-width: 1;
  }

  .pump-card.pump-live .pump-side-dock {
    fill: color-mix(in srgb,var(--pump-accent) 22%,var(--surface-alt) 78%);
    stroke: color-mix(in srgb,var(--border) 44%,transparent);
    stroke-width: 1.2;
  }

  .pump-card.pump-live.is-off .pump-side-dock {
    fill: color-mix(in srgb,var(--muted) 18%,var(--surface-alt) 82%);
  }

@media (max-width:720px) {
  .pump-grid {
    grid-template-columns: 1fr;
  }

  .pump-card.pump-live {
    padding: .55rem;
  }

  .pump-card.pump-live .pump-svg-wrap {
    padding: .35rem;
  }
}

  html body .image-picker-empty {
    inline-size: 100%;
    block-size: 100%;
    display: grid;
    place-items: center;
    font-size: 5rem;
    color: var(--muted);
    background: linear-gradient(145deg,color-mix(in srgb,var(--surface-alt) 92%,#fff 8%),color-mix(in srgb,var(--surface) 88%,#000 12%));
  }

  html body .image-picker-note {
    color: var(--muted);
    font-size: .88rem;
    text-align: center;
  }

  :root {
    --bg: #F7F7F8;
    --surface: #FFFFFF;
    --surface-alt: #F3F4F6;
    --surface-soft: #FAFAFA;
    --surface-hover: #ECECF1;
    --text: #111827;
    --text-soft: #374151;
    --muted: #6B7280;
    --muted-2: #9CA3AF;
    --border: #E5E7EB;
    --border-soft: #ECECF1;
    --border-strong: #D1D5DB;
    --accent: #10A37F;
    --accent-hover: #0E8F70;
    --accent-soft: rgba(16, 163, 127, .10);
    --success: #16A34A;
    --warning: #D97706;
    --danger: #DC2626;
    --info: #2563EB;
    --shadow-soft: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
    --shadow-popover: 0 12px 40px rgba(0,0,0,.12);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-pill: 999px;
    --radius: var(--radius-md);
    --ease-standard: cubic-bezier(.2,.8,.2,1);
    --duration-fast: 120ms;
    --duration-normal: 180ms;
    --duration-slow: 240ms;
    --focus: 0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent);
    --c-bg: var(--bg);
    --c-surface: var(--surface);
    --c-surface-2: var(--surface-alt);
    --c-border: var(--border);
    --c-sidebar: var(--surface-alt);
    --c-nav-active: var(--surface-hover);
  }

  html[data-theme="dark"] {
    --bg: #212121;
    --surface: #2F2F2F;
    --surface-alt: #303030;
    --surface-soft: #262626;
    --surface-hover: #3A3A3A;
    --text: #ECECEC;
    --text-soft: #D4D4D4;
    --muted: #B4B4B4;
    --muted-2: #8E8E8E;
    --border: #424242;
    --border-soft: #3A3A3A;
    --border-strong: #565656;
    --accent: #10A37F;
    --accent-hover: #13B48D;
    --accent-soft: rgba(16, 163, 127, .16);
    --success: #22C55E;
    --warning: #F59E0B;
    --danger: #F87171;
    --info: #60A5FA;
    --shadow-soft: 0 1px 2px rgba(0,0,0,.22), 0 12px 32px rgba(0,0,0,.28);
    --shadow-popover: 0 18px 48px rgba(0,0,0,.38);
  }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: "Vazirmatn", "Noto Naskh Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.68;
    font-variant-numeric: tabular-nums;
    text-rendering: optimizeLegibility;
  }

  button,
  input,
  select,
  textarea,
  .card,
  .modal-card,
  .quick-modal-card,
  .topbar-menu,
  .toast,
  .data-table-shell,
  .image-picker-frame,
  .nav button {
    transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard);
  }

  .card,
  .login-card,
  .modal-card,
  .quick-modal-card,
  .top-user,
  .topbar-menu,
  .detail-box,
  .toast,
  .cal,
  .export-range,
  .data-table-shell {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
  }

  .card {
    padding: 1rem;
  }

  .card h2,
  .card h3,
  .modal-head h3 {
    color: var(--text);
    letter-spacing: -.01em;
    line-height: 1.35;
  }

  .muted,
  small,
  .field label,
  .table-subtitle,
  .nav-group-label {
    color: var(--muted);
  }

  button {
    min-height: 2.5rem;
    border-radius: var(--radius-md);
    border-color: var(--border);
    box-shadow: none;
    font-weight: 600;
    justify-content: center;
  }

  button:not(.gray):not(.ghost):not(.red):not(.danger):not(.green):not(.warn):not(.icon-only):not(.perm-check) {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }

  button:not(:disabled):hover {
    transform: translateY(-1px);
  }

  button:not(:disabled):active {
    transform: translateY(0);
  }

  button.gray,
  button.ghost,
  .perm-check {
    background: transparent;
    color: var(--text);
    border-color: var(--border);
  }

  button.gray:hover,
  button.ghost:hover,
  .perm-check:hover {
    background: var(--surface-hover);
    border-color: var(--border-strong);
  }

  button.icon-only {
    border-radius: var(--radius-md);
  }

  button:disabled,
  [disabled] {
    opacity: .48;
  }

  .field input,
  .field select,
  .field textarea,
  .table-filter,
  .pager-size select,
  .cal select {
    min-height: 2.65rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: .55rem .78rem;
    box-shadow: none;
  }

  .field input:hover,
  .field select:hover,
  .field textarea:hover,
  .table-filter:hover {
    border-color: var(--border-strong);
    background: var(--surface-soft);
  }

  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  input.app-soft-focused,
  select.app-soft-focused,
  textarea.app-soft-focused,
  [tabindex]:focus-visible,
  .nav button:focus-visible,
  .image-picker-frame:focus-visible {
    outline: none;
    box-shadow: var(--focus);
    border-color: var(--accent);
  }

  .sidebar,
  .side-collapsed .sidebar {
    background: var(--surface-alt);
    border-color: var(--border-soft);
    padding: .7rem;
  }

  .sidebar-brand,
  .top-user {
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface) 72%, var(--surface-alt));
    border-color: var(--border-soft);
  }

  .nav {
    gap: .55rem;
  }

  .nav-group {
    display: grid;
    gap: .18rem;
  }

  .nav-group-label {
    font-size: .74rem;
    font-weight: 700;
    padding: .42rem .68rem .18rem;
    letter-spacing: .01em;
  }

  .nav button {
    min-height: 2.55rem;
    border-radius: var(--radius-md);
    color: var(--text-soft);
    padding: .52rem .68rem;
    position: relative;
    overflow: hidden;
  }

  .nav button:hover {
    background: var(--surface-hover);
    color: var(--text);
    border-color: transparent;
  }

  .nav button.active {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border-soft);
    box-shadow: 0 1px 1px rgba(0,0,0,.03);
  }

  .nav button.active::before {
    content: "";
    position: absolute;
    inset-block: .55rem;
    inset-inline-start: .2rem;
    width: 3px;
    border-radius: var(--radius-pill);
    background: var(--accent);
  }

  .side-collapsed .nav-group-label {
    display: none;
  }

  .topbar {
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    border-bottom-color: var(--border-soft);
    box-shadow: 0 1px 0 rgba(0,0,0,.03);
  }

  #pageTitle {
    font-size: 1.12rem;
    font-weight: 750;
  }

  .topbar-menu {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-popover);
    border-color: var(--border-soft);
    padding: .42rem;
  }

  .topbar-menu-item,
  .topbar-pref-row {
    border-radius: var(--radius-md);
  }

  .dashboard-shell {
    display: grid;
    gap: 1rem;
  }

  .dashboard-hero,
  .section-head,
  .metric-head,
  .dashboard-hero-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
  }

  .dashboard-hero {
    padding: .25rem .1rem .2rem;
  }

  .dashboard-hero h2 {
    margin: 0 0 .15rem;
    font-size: clamp(1.25rem, 2.1vw, 1.75rem);
    line-height: 1.25;
  }

  .dashboard-hero p {
    margin: 0;
  }

  .dashboard-kpis {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .premium-metric {
    position: relative;
    min-height: 9.2rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    overflow: hidden;
  }

  .premium-metric::after {
    content: "";
    position: absolute;
    inset-inline: 1rem;
    inset-block-end: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-soft), transparent);
  }

  .metric-head {
    justify-content: flex-start;
  }

  .metric-icon {
    width: 2.15rem;
    height: 2.15rem;
    border-radius: var(--radius-md);
    display: inline-grid;
    place-items: center;
    background: var(--accent-soft);
    color: var(--accent);
  }

  .metric b,
  .premium-metric b {
    font-size: clamp(1.35rem, 2.4vw, 1.85rem);
    line-height: 1.2;
    color: var(--text);
    direction: ltr;
    text-align: start;
  }

  .metric-status,
  .badge {
    display: inline-flex;
    align-items: center;
    width: max-content;
    border-radius: var(--radius-pill);
    padding: .14rem .55rem;
    font-size: .78rem;
    line-height: 1.45;
    color: var(--text-soft);
    background: var(--surface-alt);
    border: 1px solid var(--border-soft);
  }

  .metric-status.success,
  .badge.green {
    color: var(--success);
    background: color-mix(in srgb, var(--success) 12%, transparent);
    border-color: color-mix(in srgb, var(--success) 22%, transparent);
  }

  .metric-status.warn,
  .badge.warn {
    color: var(--warning);
    background: color-mix(in srgb, var(--warning) 12%, transparent);
    border-color: color-mix(in srgb, var(--warning) 22%, transparent);
  }

  .metric-status.danger {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    border-color: color-mix(in srgb, var(--danger) 22%, transparent);
  }

  .metric-status.info {
    color: var(--info);
    background: color-mix(in srgb, var(--info) 12%, transparent);
    border-color: color-mix(in srgb, var(--info) 22%, transparent);
  }

  .dashboard-ops {
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  }

  .dashboard-panel .data-table-shell {
    box-shadow: none;
  }

  .table-tools {
    align-items: center;
    padding: .78rem;
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  .data-table-shell {
    overflow: hidden;
  }

  .table-title {
    font-size: 1rem;
  }

  .table-filter-box {
    background: var(--surface-alt);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-pill);
    padding-inline: .7rem;
  }

  .table-wrap {
    max-height: min(62vh, 620px);
    overflow: auto;
  }

  table.data-table {
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface);
  }

  table.data-table th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--surface-alt);
    color: var(--text-soft);
    font-size: .86rem;
    font-weight: 750;
    border-bottom: 1px solid var(--border);
  }

  table.data-table td {
    border-bottom: 1px solid var(--border-soft);
    color: var(--text);
  }

  table.data-table tbody tr:hover td {
    background: var(--surface-soft);
  }

  table.data-table tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--surface-alt);
    border-top: 1px solid var(--border);
  }

  .cell-inner,
  td,
  th {
    font-variant-numeric: tabular-nums;
  }

  .pager {
    border-top: 1px solid var(--border-soft);
    background: var(--surface);
    padding: .7rem .78rem;
  }

  .modal,
  .quick-modal,
  .avatar-lightbox {
    background: rgba(0,0,0,.42);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  .modal-card,
  .quick-modal-card {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-popover);
    transform: translateY(6px) scale(.985);
    opacity: 0;
  }

  .modal.open .modal-card,
  .quick-modal.open .quick-modal-card {
    transform: none;
    opacity: 1;
  }

  .modal-head,
  .modal-footer {
    border-color: var(--border-soft);
  }

  .image-picker-preview {
    display: grid;
    gap: .6rem;
    max-width: 18rem;
  }

  .image-picker-frame {
    width: 100%;
    aspect-ratio: 1;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    border-radius: var(--radius-xl);
    border: 1px dashed var(--border-strong);
    background: var(--surface-alt);
  }

  .avatar-preview .image-picker-frame {
    border-radius: var(--radius-pill);
  }

  .logo-preview .image-picker-frame img {
    object-fit: contain;
    padding: .65rem;
  }

  .avatar-preview .image-picker-frame img {
    object-fit: cover;
  }

  .image-picker-actions {
    display: flex;
    justify-content: center;
    gap: .45rem;
    flex-wrap: wrap;
  }

  .empty-tip,
  .table-empty,
  [data-empty-row="1"] td {
    background: var(--surface-soft);
    color: var(--muted);
    border-radius: var(--radius-md);
  }

  .profit-positive {
    color: var(--success);
  }

  .profit-negative {
    color: var(--danger);
  }

  .bar {
    height: .48rem;
    border-radius: var(--radius-pill);
    background: var(--surface-alt);
    overflow: hidden;
    border: 1px solid var(--border-soft);
  }

  .bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  }

  .danger-zone {
    border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
    background: color-mix(in srgb, var(--danger) 7%, var(--surface));
  }

@media (max-width: 1180px) {
  .dashboard-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-ops {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  body {
    font-size: 14px;
  }

  .dashboard-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .premium-metric {
    min-height: 8.2rem;
  }

  .topbar {
    gap: .45rem;
  }

  .table-tools,
  .filter-row,
  .table-export-actions {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }

  .table-export-actions button {
    width: 100%;
  }

  .table-wrap {
    max-height: none;
    overflow: visible;
    border: 0;
  }

  table.data-table thead,
  table.data-table tfoot {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  table.data-table tbody {
    gap: .75rem;
    padding: .78rem;
    background: var(--surface-alt);
  }

  table.data-table tr {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
  }

  table.data-table td {
    grid-template-columns: minmax(6.5rem, .42fr) minmax(0, 1fr);
    gap: .75rem;
    align-items: center;
    padding: .62rem .8rem;
    border-bottom: 1px solid var(--border-soft);
    text-align: start;
  }

  table.data-table td:last-child {
    border-bottom: 0;
  }

  table.data-table td::before {
    content: attr(data-label);
    display: block;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 700;
  }

  table.data-table td .cell-inner {
    min-width: 0;
    text-align: start;
    overflow-wrap: anywhere;
  }

  .pager {
    border-top: 0;
  }
}

  .card.interactive-card {
    position: relative;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease, transform .16s ease;
  }

  .card.interactive-card:hover,
  .card.interactive-card:focus-within {
    border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
    background: color-mix(in srgb, var(--surface) 92%, var(--accent) 3%);
    box-shadow: var(--shadow-soft), inset 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
  }

  .card.interactive-card:hover {
    transform: translateY(-1px);
  }

  html[data-theme="dark"] .card.interactive-card:hover,
  html[data-theme="dark"] .card.interactive-card:focus-within {
    background: color-mix(in srgb, var(--surface) 88%, var(--accent) 4%);
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  }

  .cal-scrim {
    backdrop-filter: saturate(1.02);
  }

  .pump-card.pump-live .pump-label {
    font-size: 15.6px;
  }

  .pump-card.pump-live .pump-sale-label {
    font-size: 17.6px;
  }

  .pump-card.pump-live .pump-unit {
    font-size: 14px;
  }

  .pump-card.pump-live .pump-kgs-unit {
    font-size: 13.3px;
  }

  .pump-card.pump-live .pump-afn-unit,
  .pump-card.pump-live .pump-dollar-unit {
    font-size: 21px;
  }

  .pump-card.pump-live .pump-lpg-text {
    font-size: 31px;
  }

  .native-combobox {
    position: relative;
    width: 100%;
  }

  .native-combobox-input {
    width: 100%;
    min-height: 2.55rem;
    padding: .48rem .75rem;
    padding-inline-end: 2.55rem;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    outline: none;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
  }

  .native-combobox-input:hover {
    border-color: var(--border-strong);
  }

  .native-combobox-input:focus-visible,
  .native-combobox-input.app-soft-focused {
    outline: none;
    box-shadow: var(--focus);
    border-color: var(--accent);
  }

  .native-combobox-toggle {
    position: absolute;
    inset-inline-end: .35rem;
    top: 50%;
    transform: translateY(-50%);
    min-width: 2rem;
    width: 2rem;
    height: 2rem;
    min-height: 2rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    box-shadow: none;
  }

  .native-combobox-toggle:hover {
    background: var(--surface-hover);
    color: var(--text);
  }

  .native-combobox-list {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + .35rem);
    display: none;
    z-index: 120;
    max-height: min(17rem, 44vh);
    overflow: auto;
    padding: .35rem;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + .15rem);
    background: var(--surface);
    box-shadow: var(--shadow-lg, 0 20px 40px rgba(15, 23, 42, .16));
  }

  .native-combobox.open .native-combobox-list {
    display: grid;
    gap: .18rem;
  }

  .native-combobox-option {
    width: 100%;
    min-height: 2.25rem;
    justify-content: flex-start;
    padding: .45rem .6rem;
    border: 0;
    border-radius: .75rem;
    background: transparent;
    color: var(--text);
    box-shadow: none;
    white-space: normal;
    text-align: inherit;
  }

  .native-combobox-option:hover,
  .native-combobox-option[aria-selected="true"] {
    background: var(--surface-hover);
  }

  .native-combobox-empty {
    padding: .75rem;
    color: var(--muted);
    text-align: center;
  }

  .native-combobox.disabled {
    opacity: .65;
    pointer-events: none;
  }

@media (max-width: 700px) {
  .native-combobox-list {
    max-height: min(18rem, 52vh);
    border-radius: 1rem;
  }

  .native-combobox-input {
    min-height: 2.85rem;
    font-size: 16px;
  }
}

@media (max-width: 900px) {
  :root {
    --mobile-bottom-nav-h: calc(4.95rem + env(safe-area-inset-bottom, 0px));
    --topbar-h: 3.95rem;
  }

  .sidebar .nav,
  .side-collapsed .sidebar .nav,
  html body .sidebar .nav {
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    touch-action: pan-x;
  }

  html body .sidebar .nav button,
  html body .side-collapsed .sidebar .nav button {
    scroll-snap-align: center;
    -webkit-tap-highlight-color: transparent;
  }
}

  .pump-card.pump-live .pump-employee-pill text {
    font-weight: 950;
    fill: var(--pump-text);
    dominant-baseline: middle;
    alignment-baseline: middle;
    letter-spacing: 0;
    paint-order: stroke;
    stroke: rgba(0, 0, 0, .12);
    stroke-width: .28px;
  }

  .name-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 14px;
  }

  .name-category-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 142px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface) 96%, var(--bg));
    box-shadow: var(--shadow-soft, 0 1px 2px rgba(0,0,0,.06));
  }

  .name-category-card h3 {
    margin: 0;
    font-size: 16px;
  }

  .name-category-card .muted {
    line-height: 1.8;
  }

  .name-category-card .count {
    direction: ltr;
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
  }

  .name-category-card .name-category-btn {
    margin-top: auto;
    justify-content: center;
    width: 100%;
  }

@media (max-width: 640px) {
  .name-category-grid {
    grid-template-columns: 1fr;
  }

  .name-category-card {
    min-height: auto;
  }
}

  .all-names-table-card {
    padding: 0;
    overflow: visible;
  }

  .card.table-native-card {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  .card.table-native-card.interactive-card:hover,
  .card.table-native-card.interactive-card:focus-within {
    border-color: transparent;
    box-shadow: none;
    transform: none;
  }

  .card.table-native-card > .data-table-shell,
  .card.table-native-card > * > .data-table-shell {
    border: 0;
  }

  .all-names-table-card > .data-table-shell {
    border: 0;
    border-radius: var(--radius);
  }

  .all-names-table-card .table-tools {
    align-items: flex-start;
    gap: .8rem;
  }

  .all-names-table-card .filter-row {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(9rem, .55fr) minmax(16rem, 1.35fr) minmax(13rem, .8fr);
    align-items: end;
    gap: .62rem;
    min-width: 0;
  }

  .all-names-table-card .table-title-box {
    min-width: 0;
    align-self: center;
  }

  .all-names-table-card .table-filter-box,
  .all-names-category-filter {
    height: 2.55rem;
    min-height: 2.55rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 96%, var(--bg));
    border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 3%, transparent);
  }

  .all-names-table-card .table-filter-box {
    max-width: none;
    width: 100%;
  }

  .all-names-category-filter {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .48rem;
    padding-inline: .68rem .6rem;
    position: relative;
    transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease, transform .12s ease;
  }

  .all-names-category-filter:hover,
  .all-names-category-filter:focus-within {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
    background: var(--surface);
  }

  .all-names-filter-icon,
  .all-names-select-arrow {
    inline-size: 1.05rem;
    block-size: 1.05rem;
    color: var(--muted);
    flex: 0 0 1.05rem;
  }

  .all-names-filter-label {
    color: var(--muted);
    font-size: .78rem;
    line-height: 1;
    white-space: nowrap;
    padding-inline-end: .15rem;
  }

  .all-names-category-filter select {
    flex: 1 1 auto;
    min-width: 0;
    height: 2.25rem;
    min-height: 2.25rem;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-weight: 750;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
  }

  .all-names-select-arrow {
    pointer-events: none;
    opacity: .75;
  }

  .all-names-add-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    isolation: isolate;
  }

  .all-names-add-trigger {
    position: relative;
    z-index: 2;
  }

  .all-names-add-menu {
    position: absolute;
    inset-block-start: calc(100% + 8px);
    inset-inline-end: 0;
    width: min(270px, calc(100vw - 24px));
    padding: 6px;
    display: none;
    grid-template-columns: 1fr;
    gap: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 18px 46px rgba(0, 0, 0, .18);
    z-index: 90;
  }

  .all-names-add-menu.open {
    display: grid;
    animation: menuPop .14s ease both;
  }

  .all-names-add-menu button,
  .all-names-modal-menu button {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 9px 10px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--text);
    text-align: start;
    box-shadow: none;
  }

  .all-names-add-menu button:hover,
  .all-names-modal-menu button:hover {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
  }

  .all-names-add-menu .inline-icon,
  .all-names-modal-menu .inline-icon {
    inline-size: 18px;
    block-size: 18px;
    color: var(--accent);
    flex: 0 0 18px;
  }

  .all-names-modal-menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px;
  }

  html[dir="ltr"] .all-names-add-menu {
    inset-inline-start: 0;
    inset-inline-end: auto;
  }

@media (max-width: 980px) {
  .all-names-table-card .filter-row {
    grid-template-columns: 1fr 1fr;
  }

  .all-names-table-card .table-title-box {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .all-names-table-card .table-tools {
    gap: .65rem;
  }

  .all-names-table-card .filter-row {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .all-names-category-filter,
  .all-names-table-card .table-filter-box {
    width: 100%;
    max-width: 100%;
  }

  .all-names-add-menu {
    inset-inline-end: auto;
    inset-inline-start: 0;
  }
}

  .cash-journal-card {
    padding: 0;
    overflow: visible;
  }

  .cash-journal-card > .data-table-shell {
    border: 0;
    border-radius: var(--radius);
  }

  .cash-journal-form .field textarea {
    min-height: 5rem;
  }

  .ledger-profile-head {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: .55rem;
    align-items: center;
    margin-bottom: .75rem;
    padding: .75rem;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface) 92%, var(--bg));
  }

  .ledger-profile-head b {
    font-size: 1.05rem;
  }

  .ledger-profile-head span {
    color: var(--muted);
    font-weight: 700;
  }

  .ledger-modal-footer {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .5rem;
  }

  .ledger-modal-footer b {
    min-height: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 92%, var(--bg));
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
  }

@media (max-width: 700px) {
  .ledger-profile-head {
    grid-template-columns: 1fr;
  }

  .ledger-modal-footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

  .data-table-shell table.data-table tfoot .custom-table-footer-cell {
    justify-content: center;
    text-align: center;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
    font-weight: 800;
  }

  .data-table-shell table.data-table tfoot .custom-table-footer-cell:empty::before {
    content: "";
  }

  .all-names-table-card .filter-row {
    grid-template-columns: minmax(9rem, .55fr) minmax(18rem, 1.45fr);
  }

  .all-names-category-th {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .all-names-category-th-btn {
    width: 100%;
    min-height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .28rem .55rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 850;
    box-shadow: none;
  }

  .all-names-category-th-btn:hover,
  .all-names-category-th-btn:focus-visible,
  .all-names-category-th:focus-within .all-names-category-th-btn {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border-color: color-mix(in srgb, var(--accent) 22%, transparent);
    outline: 0;
  }

  .all-names-category-th-btn .inline-icon {
    inline-size: 1rem;
    block-size: 1rem;
    opacity: .8;
  }

  .all-names-category-menu {
    position: absolute;
    inset-block-start: calc(100% + 8px);
    inset-inline-start: 50%;
    transform: translateX(-50%);
    width: min(230px, calc(100vw - 32px));
    display: none;
    padding: 6px;
    gap: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 18px 46px rgba(0, 0, 0, .18);
    z-index: 95;
  }

  .all-names-category-menu.open {
    display: grid;
    animation: menuPop .14s ease both;
  }

  .all-names-category-menu button {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .45rem .62rem;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--text);
    text-align: start;
    box-shadow: none;
  }

  .all-names-category-menu button:hover,
  .all-names-category-menu button[aria-checked="true"] {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
  }

  .all-names-category-menu .inline-icon {
    inline-size: 1rem;
    block-size: 1rem;
    color: var(--accent);
  }

  .all-name-basic-form {
    align-items: end;
  }

@media (max-width: 700px) {
  .all-names-table-card .filter-row {
    grid-template-columns: 1fr;
  }
}

  .data-table-shell table.data-table thead th .cell-inner {
    max-width: none;
    overflow: visible;
  }

  .table-col-filter-btn {
    width: 100%;
    min-height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .38rem;
    padding: .26rem .46rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 850;
    line-height: 1.2;
    box-shadow: none;
    cursor: pointer;
  }

  .table-col-filter-btn:hover,
  .table-col-filter-btn:focus-visible,
  .table-col-filter-btn[aria-expanded="true"],
  .table-col-filter-btn.is-filtered,
  .table-col-filter-btn.is-sorted {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border-color: color-mix(in srgb, var(--accent) 24%, transparent);
    outline: 0;
  }

  .table-col-filter-btn.is-filtered {
    background: color-mix(in srgb, var(--accent) 16%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
    box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--accent) 72%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent);
  }

  .table-col-filter-btn.is-sorted {
    background: color-mix(in srgb, var(--accent) 13%, transparent);
    border-color: color-mix(in srgb, var(--accent) 38%, transparent);
  }

  .table-col-filter-btn.is-sorted .table-col-state,
  .table-col-filter-btn.is-filtered .table-col-state {
    color: var(--accent);
    opacity: 1;
  }

  .table-col-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .table-col-state {
    inline-size: 1rem;
    block-size: 1rem;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--muted);
    font-weight: 900;
    line-height: 1;
  }

  .table-col-state .inline-icon,
  .table-col-filter-btn .inline-icon {
    inline-size: 1rem;
    block-size: 1rem;
  }

  .table-filter-active-dot {
    inline-size: .48rem;
    block-size: .48rem;
    display: inline-block;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 17%, transparent);
  }

  .table-column-filter-menu {
    position: fixed;
    z-index: 10000;
    inline-size: max-content;
    min-inline-size: 17.5rem;
    max-inline-size: min(34rem, calc(100vw - 1rem));
    max-height: min(25rem, calc(100vh - 1rem));
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    gap: .46rem;
    padding: .58rem;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface) 98%, var(--bg));
    color: var(--text);
    box-shadow: 0 22px 58px rgba(15, 23, 42, .22), 0 0 0 1px color-mix(in srgb, var(--surface) 75%, transparent) inset;
    direction: rtl;
    overflow: hidden;
    overscroll-behavior: contain;
    contain: layout paint;
    animation: menuPop .12s ease both;
  }

  html[data-theme="dark"] .table-column-filter-menu {
    box-shadow: 0 24px 70px rgba(0, 0, 0, .42), 0 0 0 1px rgba(255,255,255,.03) inset;
  }

  .table-filter-menu-search {
    min-height: 2.35rem;
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .38rem .52rem;
    border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
    border-radius: 13px;
    background: color-mix(in srgb, var(--surface-alt) 58%, transparent);
  }

  .table-filter-menu-search:focus-within {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent);
  }

  .table-filter-menu-search .inline-icon {
    inline-size: 1rem;
    block-size: 1rem;
    color: var(--muted);
    flex: 0 0 auto;
  }

  .table-filter-menu-search input {
    min-width: 0;
    inline-size: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
  }

  .table-filter-menu-search input::placeholder {
    color: var(--muted);
  }

  .table-filter-sort-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 2.25rem;
    gap: .35rem;
    min-width: 0;
    max-inline-size: 100%;
    overflow: hidden;
  }

  .table-filter-sort-actions .btn-mini {
    min-width: 0;
    min-height: 2.15rem;
    padding-inline: .5rem;
    justify-content: center;
    border-radius: 12px;
    overflow: hidden;
  }

  .table-filter-sort-actions .btn-mini span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .table-filter-sort-actions .table-sort-clear-btn {
    inline-size: 2.25rem;
    padding-inline: 0;
  }

  .table-filter-sort-actions .btn-mini.active {
    background: color-mix(in srgb, var(--accent) 15%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
    color: var(--accent);
  }

  .table-filter-option {
    min-height: 2.15rem;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .4rem .5rem;
    border-radius: 12px;
    color: var(--text);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    min-width: 0;
    max-inline-size: 32rem;
    transition: background-color .12s ease, color .12s ease;
  }

  .table-filter-option:hover,
  .table-filter-option:focus-within {
    background: color-mix(in srgb, var(--accent) 9%, transparent);
  }

  .table-filter-option.is-selected {
    background: color-mix(in srgb, var(--accent) 6%, transparent);
  }

  .table-filter-option input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--accent);
    flex: 0 0 auto;
    pointer-events: none;
  }

  .table-filter-option span {
    min-width: 0;
    max-inline-size: min(27rem, calc(100vw - 6.5rem));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .table-filter-option-all {
    font-weight: 850;
    background: color-mix(in srgb, var(--surface-alt) 72%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  }

  .table-filter-option.is-blank span {
    color: var(--muted);
    font-style: normal;
  }

  .table-filter-options {
    min-height: 2rem;
    max-height: min(16rem, calc(100vh - 12rem));
    overflow: auto;
    display: grid;
    align-content: start;
    gap: .16rem;
    padding-inline-end: .1rem;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .table-filter-empty {
    padding: .75rem;
    color: var(--muted);
    text-align: center;
  }

@media (max-width: 700px) {
  .table-column-filter-menu {
    min-inline-size: 0;
    max-inline-size: calc(100vw - 1rem);
    max-height: min(68svh, 28rem);
    border-radius: 16px;
  }

  .table-filter-sort-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 2.15rem;
  }

  .table-filter-sort-actions .btn-mini {
    padding-inline: .35rem;
  }

  .table-filter-sort-actions .btn-mini span:last-child {
    font-size: .82rem;
  }

  .table-filter-option {
    max-inline-size: 100%;
    min-height: 2.35rem;
  }

  .table-filter-option span {
    max-inline-size: calc(100vw - 6.5rem);
  }
}

  .table-column-filter-menu .table-filter-sort-actions .btn-mini {
    contain: paint;
  }

  .table-filter-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9998;
    touch-action: manipulation;
  }

  .table-column-filter-menu {
    z-index: 10001;
  }

  body.table-filter-open .table-column-filter-menu {
    isolation: isolate;
  }

  .table-filter-menu-search input::placeholder {
    opacity: .82;
  }

  .table-filter-sort-actions {
    justify-content: start;
    align-items: center;
  }

  .table-filter-sort-actions .table-sort-icon-btn,
  .table-filter-sort-actions .table-sort-clear-btn {
    font-size: 1.05rem;
    line-height: 1;
  }

  .table-filter-sort-actions .table-sort-icon-btn span,
  .table-filter-sort-actions .table-sort-clear-btn .inline-icon {
    inline-size: 1.05rem;
    block-size: 1.05rem;
    display: inline-grid;
    place-items: center;
  }

  .field input:not([type="number"]):not([type="tel"]):not([type="email"]):not([type="url"]):not([type="password"]):not([type="search"]),
  .field textarea {
    direction: rtl;
    text-align: right;
    unicode-bidi: plaintext;
  }

  .field input[type="number"],
  .field input[inputmode="numeric"],
  .field input[inputmode="decimal"],
  .field input[data-numeric="true"],
  input[type="number"],
  input[inputmode="numeric"],
  input[inputmode="decimal"] {
    font-variant-numeric: tabular-nums lining-nums;
  }

  .table-filter,
  .table-filter-menu-search input,
  input[type="search"] {
    text-align: start;
    unicode-bidi: plaintext;
    caret-color: currentColor;
  }

  html[dir="rtl"] .table-filter:not([dir="auto"]),
  html[dir="rtl"] .table-filter-menu-search input:not([dir="auto"]),
  html[dir="rtl"] input[type="search"]:not([dir="auto"]) {
    direction: rtl;
  }

  html[dir="ltr"] .table-filter:not([dir="auto"]),
  html[dir="ltr"] .table-filter-menu-search input:not([dir="auto"]),
  html[dir="ltr"] input[type="search"]:not([dir="auto"]) {
    direction: ltr;
  }

  .data-table-shell table.data-table tfoot td {
    min-height: 2.8rem;
    height: 2.8rem;
  }

  .data-table-shell table.data-table tfoot .footer-stack {
    min-height: 2.65rem;
  }

  .balances-table-card .data-table-shell .table-wrap {
    max-height: min(68vh, 620px);
  }

@media (max-width: 900px) {
  html.mobile-bottom-nav-mode,
  html.mobile-bottom-nav-mode body {
    overscroll-behavior-x: contain;
  }

  .main {
    touch-action: pan-y;
    overscroll-behavior-x: contain;
  }

  #content {
    touch-action: pan-y;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  #content.is-swipe-dragging {
    user-select: none;
    -webkit-user-select: none;
  }

  #content.swipe-source-hidden {
    visibility: hidden;
  }

  html.page-swipe-live body {
    overscroll-behavior-x: none;
  }

  html.page-swipe-live .main {
    overflow-x: hidden;
  }

  .mobile-page-swipe-stage {
    position: fixed;
    overflow: hidden;
    pointer-events: none;
    z-index: 42;
    contain: layout paint style;
    background: var(--bg);
    isolation: isolate;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .mobile-page-swipe-panel {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--bg);
    border-radius: 0;
    will-change: transform, opacity;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--border) 52%, transparent);
  }

  .mobile-page-swipe-panel-inner {
    min-height: 100%;
    pointer-events: none;
  }

  .mobile-page-swipe-panel [id],
  .mobile-page-swipe-panel input,
  .mobile-page-swipe-panel select,
  .mobile-page-swipe-panel textarea,
  .mobile-page-swipe-panel button,
  .mobile-page-swipe-panel a {
    pointer-events: none !important;
  }

  .mobile-page-swipe-stage.is-swipe-animating .mobile-page-swipe-panel {
    transition: transform .24s cubic-bezier(.22, 1, .36, 1), opacity .24s cubic-bezier(.22, 1, .36, 1);
  }

  .mobile-page-swipe-edge-card {
    min-height: min(42vh, 420px);
    display: grid;
    place-items: center;
    opacity: .72;
  }

  .data-table-shell .table-wrap,
  .table-wrap:has(table.data-table),
  [data-horizontal-scroll],
  .h-scroll {
    touch-action: pan-y;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .sidebar .nav,
  .side-collapsed .sidebar .nav {
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .sidebar .nav,
  .side-collapsed .sidebar .nav,
  html body .sidebar .nav {
    isolation: isolate;
  }

  .sidebar .nav .mobile-swipe-nav-indicator {
    position: absolute;
    inset-block: .12rem;
    inset-inline-start: 0;
    inline-size: var(--swipe-nav-w, 0px);
    border-radius: 1.05rem;
    transform: translate3d(var(--swipe-nav-x, 0px), 0, 0) scale(calc(.93 + (var(--swipe-nav-progress, 0) * .07)));
    transform-origin: center;
    opacity: calc(.10 + (var(--swipe-nav-progress, 0) * .62));
    background: color-mix(in srgb, var(--accent) 18%, var(--surface) 82%);
    border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent), 0 8px 22px color-mix(in srgb, var(--accent) 14%, transparent);
    pointer-events: none;
    z-index: 0;
    transition: opacity .14s ease, transform .14s linear, inline-size .14s linear;
  }

  .sidebar .nav:not(.is-swipe-previewing) .mobile-swipe-nav-indicator {
    opacity: 0;
  }

  html body .sidebar .nav button,
  html body .side-collapsed .sidebar .nav button {
    z-index: 1;
  }

  html body .sidebar .nav button.swipe-origin,
  html body .side-collapsed .sidebar .nav button.swipe-origin {
    opacity: calc(1 - (var(--swipe-nav-progress, 0) * .16));
  }
}

  :root {
    --side: 246px;
    --side-collapsed: 70px;
    --tbl-row-h: 38px;
  }

  html.side-collapsed {
    --side: var(--side-collapsed);
  }

  .topbar {
    margin: -.15rem -.15rem .65rem;
    padding: .55rem .65rem .62rem;
  }

  .sidebar-brand {
    cursor: pointer;
    user-select: none;
  }

  .sidebar-brand:focus-visible {
    outline: none;
    box-shadow: var(--focus);
  }

  input:not([type="number"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]),
  textarea {
    direction: rtl;
    text-align: right;
  }

  html[dir="ltr"] input:not([type="number"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]),
  html[dir="ltr"] textarea {
    direction: ltr;
    text-align: left;
  }

@media (max-width:900px) {
  :root {
    --side: 246px;
    --tbl-row-h: 38px;
  }

  .topbar {
    margin: 0 0 .55rem;
  }
}

  .balance-value {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: .18rem;
    min-inline-size: 4.75rem;
    direction: ltr;
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
  }

  .balance-positive {
    color: var(--success);
  }

  .balance-negative {
    color: var(--danger);
  }

  .balance-zero {
    color: var(--muted);
  }

  .currency-usd {
    font-weight: 800;
    letter-spacing: .01em;
  }

  .currency-afn {
    font-weight: 500;
  }

  .currency-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 3.4rem;
    max-inline-size: 100%;
    padding: .16rem .48rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--surface-alt) 70%, transparent);
    color: var(--text);
    white-space: nowrap;
  }

  .currency-badge.currency-usd {
    border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  }

  .currency-badge.currency-afn {
    background: var(--surface-soft);
  }

  .sidebar .nav {
    gap: .32rem;
  }

  .sidebar .nav button {
    cursor: pointer;
  }

  .data-table-shell .table-wrap.table-compact,
  .data-table-shell .table-wrap.table-medium,
  .data-table-shell .table-wrap.table-wide {
    max-height: calc((var(--tbl-row-h, 46px) * 10) + 3.2rem);
    overflow: auto;
    scroll-behavior: smooth;
  }

  .data-table-shell.table-is-empty .table-wrap {
    max-height: 12rem;
  }

  .data-table-shell.table-is-empty tfoot {
    display: none;
  }

  .table-empty-state {
    min-height: 5.75rem;
    display: grid;
    place-items: center;
    gap: .45rem;
    text-align: center;
    color: var(--c-muted);
  }

  .empty-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    border: 1px dashed var(--c-border);
    background: var(--c-surface-alt);
    color: var(--c-text);
    border-radius: 999px;
    padding: .62rem 1rem;
    font-weight: 800;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
  }

  .empty-add-btn:hover {
    background: var(--c-surface);
    border-color: var(--c-accent);
    transform: translateY(-1px);
  }

  .logs-native-card .table-title-box .table-title:empty {
    display: none;
  }

  .muted-input {
    color: var(--c-muted);
    background: var(--c-surface-alt);
  }

  .inline-input-action {
    display: flex;
    gap: .5rem;
    align-items: center;
  }

  .inline-input-action input {
    flex: 1;
    min-width: 0;
  }

  .ledger-statement-head {
    text-align: center;
    margin: .2rem 0 1rem;
    padding: .5rem .5rem 1rem;
    border-bottom: 1px solid var(--c-border);
  }

  .ledger-statement-head h2 {
    margin: 0;
    font-size: clamp(1.25rem,2.4vw,1.75rem);
    font-weight: 900;
  }

  .ledger-statement-head p {
    margin: .35rem 0 0;
    color: var(--c-muted);
    font-size: .92rem;
  }

  .shift-action-head {
    display: grid;
    gap: .25rem;
    text-align: center;
    padding: .5rem .25rem 1rem;
    border-bottom: 1px solid var(--c-border);
    margin-bottom: 1rem;
  }

  .shift-action-head b {
    font-size: 1.2rem;
  }

  .shift-action-head span,
  .shift-action-head small {
    color: var(--c-muted);
  }

  .shift-actions {
    justify-content: center;
    gap: .6rem;
    flex-wrap: wrap;
  }

  .native-combobox-option.is-active,
  .native-combobox-option[aria-selected="true"] {
    background: var(--c-surface-alt);
    color: var(--c-text);
    font-weight: 800;
  }

@media (max-width:900px) {
  .data-table-shell .table-wrap.table-compact,
  .data-table-shell .table-wrap.table-medium,
  .data-table-shell .table-wrap.table-wide {
    max-height: calc((var(--tbl-row-h, 48px) * 10) + 3.4rem);
  }

  .inline-input-action {
    align-items: stretch;
  }
}

  .ledger-statement-subtitle {
    margin: -.25rem 0 .75rem;
    color: var(--muted);
    font-size: .9rem;
    font-weight: 700;
    text-align: center;
  }

  .table-col-filter-btn .table-col-state {
    opacity: 0;
    transform: translateY(1px) scale(.94);
    transition: opacity .14s ease, transform .14s ease, color .14s ease;
  }

  .table-col-filter-btn:hover .table-col-state,
  .table-col-filter-btn:focus-visible .table-col-state,
  .table-col-filter-btn[aria-expanded="true"] .table-col-state {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  .table-col-filter-btn.is-sorted .table-col-state,
  .table-col-filter-btn.is-filtered .table-col-state {
    opacity: 0;
  }

  .table-col-filter-btn.is-sorted:hover .table-col-state,
  .table-col-filter-btn.is-filtered:hover .table-col-state,
  .table-col-filter-btn.is-sorted:focus-visible .table-col-state,
  .table-col-filter-btn.is-filtered:focus-visible .table-col-state,
  .table-col-filter-btn.is-sorted[aria-expanded="true"] .table-col-state,
  .table-col-filter-btn.is-filtered[aria-expanded="true"] .table-col-state {
    opacity: 1;
  }

  html,
  body {
    height: 100%;
    overflow-x: hidden;
  }

  html[dir="rtl"],
  html[dir="rtl"] body {
    direction: rtl;
  }

  html[dir="ltr"],
  html[dir="ltr"] body {
    direction: ltr;
  }

  .app {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }

  .main,
  html[dir="ltr"] .main {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    direction: inherit;
  }

  html[dir="rtl"] .main,
  html[dir="rtl"] #content,
  html[dir="rtl"] .modal-body,
  html[dir="rtl"] .quick-modal-card,
  html[dir="rtl"] .table-wrap,
  html[dir="rtl"] .data-table-shell .table-wrap {
    direction: rtl;
  }

  html[dir="ltr"] .main,
  html[dir="ltr"] #content,
  html[dir="ltr"] .modal-body,
  html[dir="ltr"] .quick-modal-card,
  html[dir="ltr"] .table-wrap,
  html[dir="ltr"] .data-table-shell .table-wrap {
    direction: ltr;
  }

  #content {
    min-width: 0;
  }

  [data-number],
  .num,
  .ltr-field,
  input[type="number"],
  code,
  pre {
    direction: ltr;
  }

  .settings-card {
    display: grid;
    gap: .9rem;
  }

  .settings-card-head {
    padding-bottom: .2rem;
  }

  .settings-section {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface-alt) 62%, var(--surface));
    padding: .95rem;
    min-width: 0;
  }

  .section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .75rem;
  }

  .section-head h3,
  .section-head h4 {
    margin: 0 0 .2rem;
    line-height: 1.35;
  }

  .section-head .muted {
    margin: 0;
  }

  .field-help {
    display: block;
    margin-top: .3rem;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.45;
  }

  .settings-action-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    align-items: center;
  }

  .user-form {
    display: grid;
    gap: .85rem;
  }

  .user-form-section .avatar-picker {
    align-items: flex-start;
  }

  .form-error {
    border: 1px solid color-mix(in srgb, var(--danger) 38%, var(--border));
    background: color-mix(in srgb, var(--danger) 8%, var(--surface));
    color: var(--danger);
    border-radius: var(--radius);
    padding: .65rem .8rem;
    font-weight: 700;
  }

@media (max-width: 720px) {
  .section-head,
  .settings-action-grid {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-action-grid > button {
    width: 100%;
    justify-content: center;
  }
}

  html body .modal.open,
  html body .quick-modal.open {
    overscroll-behavior: contain;
  }

  html body .modal-head,
  html body .modal-footer {
    position: sticky;
    z-index: 3;
  }

  html body .modal-head {
    top: 0;
  }

  html body .modal-footer {
    bottom: 0;
  }

  html body .modal-body {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .field.has-field-counter {
    position: relative;
  }

  .field .field-counter {
    position: absolute;
    inset-block-start: calc(100% + .18rem);
    inset-inline-start: auto;
    inset-inline-end: .35rem;
    z-index: 46;
    display: block;
    margin: 0;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.25;
    text-align: end;
    direction: ltr;
    unicode-bidi: plaintext;
    font-variant-numeric: tabular-nums;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-.04rem);
    transition: opacity .12s ease, visibility .12s ease, transform .12s ease;
  }

  .field:focus-within .field-counter,
  .field.field-counter-visible .field-counter {
    opacity: .92;
    visibility: visible;
    transform: translateY(0);
  }

  .field .field-counter.is-near-limit {
    color: var(--warning);
    font-weight: 700;
  }

  input:not(:placeholder-shown):invalid,
  textarea:not(:placeholder-shown):invalid {
    border-color: color-mix(in srgb, var(--danger) 55%, var(--border));
  }

  input.numeric-input {
    font-variant-numeric: tabular-nums;
  }

  .table-col-filter-btn.is-filtered .table-col-state {
    opacity: 1;
    transform: translateY(0) scale(1);
    inline-size: auto;
    min-inline-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
  }

  .table-col-filter-btn.is-filtered .table-filter-active-dot {
    inline-size: .52rem;
    block-size: .52rem;
    background: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
  }

  .table-col-filter-btn.is-filtered .table-sort-mark {
    color: var(--accent);
    font-weight: 950;
    line-height: 1;
  }

  .app-tooltip {
    white-space: pre-line;
  }

  .relative-time {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    color: inherit;
    text-decoration: underline dotted color-mix(in srgb, var(--muted) 64%, transparent);
    text-underline-offset: 3px;
    cursor: help;
  }

  .data-table-shell .audit-note.audit-note-detailed {
    display: grid;
    gap: .18rem;
    min-width: 12.5rem;
  }

  .audit-line {
    display: grid;
    grid-template-columns: minmax(6.5rem, max-content) 1fr;
    gap: .4rem;
    align-items: baseline;
    color: var(--muted);
  }

  .audit-line b {
    color: var(--text);
    font-weight: 700;
  }

  .audit-exact-time {
    direction: ltr;
    unicode-bidi: embed;
  }

  .modal-head h3 .modal-title-subtitle {
    display: block;
    margin-top: .18rem;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.35;
  }

  .shift-warning-box {
    margin-top: .45rem;
    padding: .55rem .7rem;
    border: 1px solid color-mix(in srgb, var(--warning) 34%, var(--border));
    border-radius: .85rem;
    color: var(--warning);
    background: color-mix(in srgb, var(--warning) 10%, transparent);
    font-size: .86rem;
    line-height: 1.55;
  }

  tr.shift-attention-row > td {
    background: color-mix(in srgb, var(--warning) 8%, transparent);
  }

  tr.shift-attention-row:hover > td {
    background: color-mix(in srgb, var(--warning) 13%, transparent);
  }

  .badge.danger {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    border-color: color-mix(in srgb, var(--danger) 24%, transparent);
  }

  .storage-status-card {
    display: grid;
    grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr);
    gap: 1rem;
    align-items: stretch;
  }

  .storage-status-visual {
    min-width: 0;
  }

  .storage-status-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .85rem;
    min-width: 0;
  }

  .storage-status-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .65rem;
  }

  .storage-status-item {
    border: 1px solid var(--border);
    background: var(--surface-alt);
    border-radius: 1rem;
    padding: .8rem;
    min-width: 0;
  }

  .storage-status-item small,
  .storage-status-item span {
    display: block;
    color: var(--muted);
    font-size: .82rem;
  }

  .storage-status-item b {
    display: block;
    margin: .25rem 0 .12rem;
    color: var(--text);
    font-size: clamp(1.15rem, 2vw, 1.55rem);
    direction: ltr;
    text-align: start;
    font-variant-numeric: tabular-nums;
  }

@media (max-width: 820px) {
  .storage-status-card {
    grid-template-columns: 1fr;
  }

  .storage-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .storage-status-grid {
    grid-template-columns: 1fr;
  }
}

  .audit-mini {
    appearance: none;
    border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    background: color-mix(in srgb, var(--surface) 88%, var(--bg));
    color: var(--text);
    border-radius: 999px;
    padding: .22rem .55rem;
    min-height: 1.75rem;
    max-width: 9.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 750;
    line-height: 1.15;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: none;
  }

  .audit-mini span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .audit-mini:hover,
  .audit-mini:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 56%, var(--border));
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
    color: var(--text);
    outline: none;
  }

  .audit-popover {
    position: fixed;
    z-index: 900;
    width: min(21rem, calc(100vw - 1rem));
    background: color-mix(in srgb, var(--surface) 97%, var(--bg));
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .18), 0 5px 14px rgba(15, 23, 42, .10);
    overflow: hidden;
    direction: rtl;
    text-align: start;
  }

  html[data-theme="dark"] .audit-popover {
    background: color-mix(in srgb, var(--surface) 94%, #000);
    border-color: var(--border-strong);
    box-shadow: 0 22px 50px rgba(0, 0, 0, .45), 0 6px 16px rgba(0, 0, 0, .24);
  }

  .audit-popover-head,
  .audit-popover-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .72rem .85rem;
    background: color-mix(in srgb, var(--surface-alt) 60%, transparent);
  }

  .audit-popover-head b {
    font-size: .92rem;
    font-weight: 850;
  }

  .audit-popover-close {
    width: 2rem;
    height: 2rem;
    min-height: 2rem;
    padding: 0;
  }

  .audit-popover-body {
    display: grid;
    gap: .5rem;
    padding: .85rem;
  }

  .audit-popover-body .audit-line {
    grid-template-columns: minmax(7.5rem, max-content) 1fr;
    gap: .65rem;
    padding: .38rem .45rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface-alt) 38%, transparent);
  }

  .audit-popover-body .audit-line span {
    color: var(--text);
    font-weight: 650;
    word-break: break-word;
  }

  .audit-popover-foot {
    justify-content: flex-end;
    border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  }

  .audit-popover-foot button:disabled {
    opacity: .72;
    cursor: default;
  }

  .data-table-shell .audit-note.audit-note-detailed {
    display: inline-flex;
    min-width: 0;
  }

@media (max-width: 640px) {
  .audit-popover {
    width: calc(100vw - 1rem);
  }

  .audit-popover-body .audit-line {
    grid-template-columns: 1fr;
    gap: .18rem;
  }

  .audit-mini {
    max-width: 7.5rem;
  }
}

  .field {
    position: relative;
  }

  .field > .field-help,
  .field > small.muted:not(.field-counter) {
    position: absolute;
    inset-inline-start: .25rem;
    inset-block-start: calc(100% + .18rem);
    z-index: 45;
    max-width: min(28rem, calc(100vw - 2rem));
    width: max-content;
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-.08rem);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    box-shadow: none;
    font-size: .78rem;
    line-height: 1.35;
    transition: opacity .12s ease, visibility .12s ease, transform .12s ease;
  }

  .field:focus-within > .field-help,
  .field:focus-within > small.muted:not(.field-counter) {
    opacity: .92;
    visibility: visible;
    transform: translateY(0);
  }

  .field.has-field-counter:focus-within > .field-help,
  .field.has-field-counter:focus-within > small.muted:not(.field-counter),
  .field.field-counter-visible > .field-help,
  .field.field-counter-visible > small.muted:not(.field-counter) {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-.08rem);
  }

@media (max-width: 720px) {
  .modal .modal-footer {
    gap: .55rem;
    justify-content: stretch;
  }

  .modal .modal-footer > button,
  .quick-modal .modal-footer > button {
    flex: 1 1 auto;
    min-height: 2.7rem;
  }

  .modal .modal-footer .mobile-modal-close-bottom,
  .quick-modal .modal-footer .mobile-modal-close-bottom {
    align-items: center;
    justify-content: center;
  }

  .modal .modal-head .modal-close,
  .quick-modal .modal-head .modal-close {
    opacity: .72;
  }
}

  .data-table td :is(button.table-row-delete, .table-row-delete) {
    --table-delete-danger: var(--danger, #dc2626);
  }

  [data-theme="dark"] .data-table td :is(button.table-row-delete, .table-row-delete) {
    --table-delete-danger: var(--danger, #f87171);
  }

  .column-visibility-modal {
    display: grid;
    gap: .85rem;
  }

  .column-visibility-list {
    display: grid;
    gap: .45rem;
    max-block-size: min(52vh, 24rem);
    overflow: auto;
    padding-inline-end: .15rem;
  }

  .column-visibility-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .7rem;
    padding: .68rem .75rem;
    border: 1px solid var(--border);
    border-radius: .9rem;
    background: color-mix(in srgb, var(--surface) 94%, var(--bg));
    cursor: pointer;
  }

  .column-visibility-row:hover {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
    background: var(--surface-hover);
  }

  .column-visibility-row.is-protected {
    opacity: .72;
    cursor: not-allowed;
  }

  .column-visibility-row input {
    inline-size: 1.08rem;
    block-size: 1.08rem;
    accent-color: var(--accent);
  }

  .column-visibility-row span {
    min-width: 0;
  }

  .column-visibility-row b {
    color: var(--text);
    font-size: .9rem;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .brand-form .brand-form-grid {
    align-items: start;
  }

  .brand-form .brand-logo-field .avatar-picker {
    align-items: flex-start;
  }

  .brand-form .image-picker-note {
    margin-top: .4rem;
    color: var(--muted);
    font-size: .82rem;
  }

@media (max-width: 560px) {
  .column-visibility-list {
    max-block-size: 48vh;
  }
}

  .data-table-shell table.data-table th,
  .data-table-shell table.data-table td,
  .data-table-shell table.data-table .cell-inner,
  .table-wrap table.data-table th,
  .table-wrap table.data-table td,
  .table-wrap table.data-table .cell-inner {
    unicode-bidi: plaintext;
  }

  .table-filter-menu-search input {
    -webkit-user-select: text;
    user-select: text;
  }

  .server-auto-table-shell .server-auto-wrap {
    min-height: 320px;
    border-radius: var(--radius-lg, 16px);
  }

  .server-sort-btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    justify-content: center;
    cursor: pointer;
    padding: 0;
  }

  .server-sort-btn:hover {
    opacity: .82;
  }

  .server-sort-mark {
    min-inline-size: 1.2em;
    display: inline-block;
  }

  .server-auto-table-shell .table-subtitle {
    white-space: normal;
  }

  .server-auto-table-shell.table-soft-refreshing .table-subtitle {
    opacity: 1;
  }

  .server-auto-table-shell.table-soft-refreshing .server-auto-wrap {
    scroll-behavior: auto;
  }

  .server-auto-table tbody.tbody-soft-swap,
  .server-auto-table-shell:not(.table-soft-refreshing) .server-auto-table tbody {
    opacity: 1;
    transition: none;
  }

  .server-auto-table-shell {
    overflow-anchor: none;
  }

  .server-auto-table-shell .server-auto-wrap {
    min-height: 260px;
    overflow-anchor: none;
  }

  .server-auto-table tbody.tbody-soft-swap {
    will-change: auto;
  }

  html body .data-table-shell .table-wrap[data-chat-scroll="1"] {
    -webkit-overflow-scrolling: touch;
    will-change: scroll-position;
  }

  html body .sidebar,
  html body.side-collapsed .sidebar,
  html[dir="ltr"] body .sidebar,
  html[dir="ltr"] body.side-collapsed .sidebar {
    contain: layout paint;
  }

@media (max-width: 900px) {
  html body .sidebar,
  html body.side-collapsed .sidebar,
  html[dir="ltr"] body .sidebar,
  html[dir="ltr"] body.side-collapsed .sidebar {
    contain: none;
  }
}

  html body button.app-btn:not(.icon-only),
  html body .table-actions-menu button,
  html body .modal-footer button,
  html body .actions button,
  html body .settings-action-grid button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
  }

  html.theme-switching body {
    pointer-events: none;
  }

  html.theme-switching body .theme-toggle-btn {
    pointer-events: auto;
  }

  .theme-smooth-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483646;
    pointer-events: none;
    opacity: 1;
    transform: translateZ(0);
    will-change: opacity;
  }

  .theme-smooth-overlay.theme-smooth-overlay-fade {
    opacity: 0;
  }

  .server-auto-table tbody tr.server-skeleton-row td {
    pointer-events: none;
  }

  .server-skeleton-line {
    display: inline-block;
    inline-size: min(9rem, 72%);
    block-size: .72rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--text) 10%, transparent);
    opacity: .72;
    overflow: hidden;
    position: relative;
    vertical-align: middle;
  }

  .server-skeleton-line::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inline-size: 45%;
    inset-inline-start: -55%;
    background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--text) 16%, transparent), transparent);
    animation: serverSkeletonSweep 1.15s ease-in-out infinite;
  }

  .server-skeleton-line.w0 {
    inline-size: 58%;
  }

  .server-skeleton-line.w1 {
    inline-size: 72%;
  }

  .server-skeleton-line.w2 {
    inline-size: 46%;
  }

  .server-skeleton-line.w3 {
    inline-size: 64%;
  }

@media (prefers-reduced-motion: reduce) {
  .server-skeleton-line::after {
    animation: none;
  }
}

  html[dir] .table-filter-box input[type="search"][dir="auto"],
  html[dir] .table-filter-menu-search input[type="search"][dir="auto"],
  html[dir] .server-auto-search[dir="auto"],
  html[dir] input.native-search-input[type="search"][dir="auto"] {
    caret-color: currentColor;
  }

  .table-filter-menu-search input,
  .table-filter-box input[type="search"] {
    contain: paint;
  }

  :root {
    --app-visual-vh: 100dvh;
    --app-visual-vw: 100vw;
    --app-visual-top: 0px;
    --app-keyboard-inset: 0px;
  }

  html body .modal-body,
  html body .quick-modal-card .modal-body,
  html body .native-combobox-list {
    -webkit-overflow-scrolling: touch;
  }

  .native-combobox-list.native-combobox-floating {
    display: grid;
    gap: .18rem;
    position: fixed;
    inset-inline: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    z-index: 10050;
    box-sizing: border-box;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + .15rem);
    box-shadow: var(--shadow-lg, 0 20px 40px rgba(15, 23, 42, .16));
  }

  .native-combobox-list.native-combobox-floating.is-open {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
    box-shadow: 0 18px 52px color-mix(in srgb, #000 22%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
  }

  .native-combobox-list.native-combobox-floating.open-above {
    transform-origin: bottom center;
  }

  .native-combobox-list.native-combobox-floating.open-below {
    transform-origin: top center;
  }

@media (max-width: 720px) {
  html body .native-combobox-list:not(.native-combobox-floating) {
    max-height: min(18rem, calc(var(--app-visual-vh, 100dvh) - 1rem));
  }
}
}

@layer afghanlpg-priority {
  .native-lpg-support {
    border-radius: 0;
  }

  .cal {
    z-index: 240;
  }

  .cal-grid button {
    background: transparent;
    border-color: transparent;
    color: var(--text);
    box-shadow: none;
  }

  .cal-time-selects select {
    width: 100%;
    min-height: 2.15rem;
    padding: .2rem .55rem;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--border) 86%, var(--text) 10%);
    background: color-mix(in srgb, var(--surface) 94%, var(--bg));
    box-shadow: 0 1px 2px rgba(0, 0, 0, .035);
  }

  .cal-time-selects select:hover,
  .cal-time-selects select:focus-visible {
    background: var(--cgpt-hover-bg-strong);
    border-color: color-mix(in srgb, var(--accent) 46%, var(--border));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent), 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
  }

  .topbar-page-actions:empty {
    display: none;
  }

  .sidebar,
  .side-collapsed .sidebar {
    inset-block: 0;
    inset-inline-start: 0;
    inset-inline-end: auto;
    border-inline-start: 0;
    border-inline-end: 1px solid var(--border);
    z-index: 120;
  }

  .main,
  html[dir="ltr"] .main {
    margin-inline-start: var(--side);
    margin-inline-end: 0;
    max-width: calc(100% - var(--side));
    padding-block-start: calc(var(--topbar-h) + var(--main-pad, 1rem));
  }

  .topbar {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: var(--side);
    inset-inline-end: 0;
    top: 0;
    inline-size: auto;
    min-height: var(--topbar-h);
    margin: 0;
    z-index: 100;
  }

  .mobile-overlay.open {
    z-index: 110;
  }

  @media (max-width:900px) {
      .main,
      html[dir="ltr"] .main {
        margin: 0;
        max-width: 100%;
        padding-block-start: calc(var(--topbar-h) + var(--main-pad, .75rem));
      }

      .topbar {
        inset-inline: 0;
        inline-size: auto;
        min-height: var(--topbar-h);
      }

      .sidebar,
      .side-collapsed .sidebar {
        inset-block: 0;
        inset-inline-start: 0;
        inset-inline-end: auto;
        transform: translateX(105%);
      }

      html[dir="ltr"] .sidebar,
      html[dir="ltr"].side-collapsed .sidebar {
        transform: translateX(-105%);
      }

      .sidebar.open,
      .side-collapsed .sidebar.open,
      html[dir="ltr"] .sidebar.open,
      html[dir="ltr"].side-collapsed .sidebar.open {
        transform: translateX(0);
      }
  }

  html body button:not(.red):not(.danger):not(.warn):not(.green) {
    background: var(--cgpt-btn-bg);
    color: var(--text);
    border-color: transparent;
    box-shadow: none;
  }

  html body button:not(.red):not(.danger):not(.warn):not(.green):hover:not(:disabled) {
    background: var(--cgpt-hover-bg);
    border-color: transparent;
    color: var(--text);
    box-shadow: var(--cgpt-hover-shadow);
  }

  html body button:not(.red):not(.danger):not(.warn):not(.green):active:not(:disabled) {
    background: var(--cgpt-pressed-bg);
    box-shadow: var(--cgpt-pressed-shadow);
  }

  html body button:focus-visible,
  html body .clickable:focus-visible,
  html body .clickrow:focus-visible,
  html body .avatar-clickable:focus-visible {
    box-shadow: var(--cgpt-focus-ring);
  }

  html body button:disabled {
    transform: none;
  }

  html body .sidebar .nav button,
  html body .side-collapsed .sidebar .nav button {
    background: transparent;
    color: var(--text);
    border-color: transparent;
    box-shadow: none;
  }

  html body .sidebar .nav button:hover:not(:disabled),
  html body .side-collapsed .sidebar .nav button:hover:not(:disabled) {
    background: var(--cgpt-hover-bg-strong);
    border-color: transparent;
    box-shadow: var(--cgpt-hover-shadow);
  }

  html body .sidebar .nav button:active:not(:disabled),
  html body .side-collapsed .sidebar .nav button:active:not(:disabled) {
    background: var(--cgpt-pressed-bg);
    box-shadow: var(--cgpt-pressed-shadow);
  }

  html body .sidebar .nav button.active,
  html body .side-collapsed .sidebar .nav button.active {
    background: var(--cgpt-selected-bg);
    color: var(--text);
    border-color: transparent;
    box-shadow: inset 0 0 0 1px var(--cgpt-hover-border);
  }

  html body .sidebar .nav button.active:hover:not(:disabled) {
    background: var(--cgpt-selected-hover-bg);
    box-shadow: inset 0 0 0 1px var(--cgpt-pressed-border);
  }

  html body .icon-only,
  html body .topbar-action-btn,
  html body .topbar-menu-btn,
  html body .sidebar-open-btn,
  html body .sidebar-close-btn {
    background: transparent;
    border-color: transparent;
    color: var(--text);
    box-shadow: none;
  }

  html body .icon-only:hover:not(:disabled),
  html body .topbar-action-btn:hover:not(:disabled),
  html body .topbar-menu-btn:hover:not(:disabled),
  html body .sidebar-open-btn:hover:not(:disabled),
  html body .sidebar-close-btn:hover:not(:disabled) {
    background: var(--cgpt-hover-bg-strong);
    box-shadow: var(--cgpt-hover-shadow);
  }

  html body .icon-only:active:not(:disabled),
  html body .topbar-action-btn:active:not(:disabled),
  html body .topbar-menu-btn:active:not(:disabled),
  html body .sidebar-open-btn:active:not(:disabled),
  html body .sidebar-close-btn:active:not(:disabled) {
    background: var(--cgpt-pressed-bg);
    box-shadow: var(--cgpt-pressed-shadow);
  }

  html body button.green {
    background: var(--cgpt-success-soft);
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 28%, transparent);
  }

  html body button.green:hover:not(:disabled) {
    background: color-mix(in srgb, var(--success) 18%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success) 38%, transparent);
  }

  html body button.green:active:not(:disabled) {
    background: color-mix(in srgb, var(--success) 24%, transparent);
  }

  html body button.red,
  html body button.danger {
    background: var(--cgpt-danger-soft);
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 30%, transparent);
  }

  html body button.red:hover:not(:disabled),
  html body button.danger:hover:not(:disabled) {
    background: color-mix(in srgb, var(--danger) 18%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 40%, transparent);
  }

  html body button.red:active:not(:disabled),
  html body button.danger:active:not(:disabled) {
    background: color-mix(in srgb, var(--danger) 24%, transparent);
  }

  html body button.warn {
    background: var(--cgpt-warning-soft);
    color: var(--warning);
    border-color: color-mix(in srgb, var(--warning) 30%, transparent);
  }

  html body button.warn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--warning) 19%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warning) 40%, transparent);
  }

  html body button.warn:active:not(:disabled) {
    background: color-mix(in srgb, var(--warning) 25%, transparent);
  }

  html body .perm-check {
    background: transparent;
    border-color: transparent;
    color: var(--text);
  }

  html body .perm-check:hover {
    background: var(--cgpt-hover-bg-strong);
    box-shadow: var(--cgpt-hover-shadow);
  }

  html body .perm-check:active {
    background: var(--cgpt-pressed-bg);
  }

  .clickable:hover,
  tr.clickrow:hover {
    background: var(--cgpt-hover-bg);
  }

  .card.clickable:hover,
  .avatar-clickable:hover {
    background: var(--surface);
  }

  .card.clickable:active,
  .avatar-clickable:active {
    background: var(--cgpt-pressed-bg);
  }

  .badge.green {
    background: color-mix(in srgb, var(--success) 11%, transparent);
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 24%, transparent);
  }

  .badge.warn {
    background: color-mix(in srgb, var(--warning) 12%, transparent);
    color: var(--warning);
    border-color: color-mix(in srgb, var(--warning) 26%, transparent);
  }

  .topbar-menu-item:hover:not(:disabled) {
    background: var(--cgpt-hover-bg-strong);
    box-shadow: var(--cgpt-hover-shadow);
  }

  .topbar-menu-item:active:not(:disabled) {
    background: var(--cgpt-pressed-bg);
  }

  .toast-stack {
    z-index: 260;
  }

  .toast-close {
    background: transparent;
    border-color: transparent;
    color: var(--muted);
  }

  .toast-close:hover {
    background: var(--cgpt-hover-bg-strong);
    color: var(--text);
    box-shadow: var(--cgpt-hover-shadow);
  }

  .modal,
  .quick-modal,
  .avatar-lightbox {
    z-index: 220;
  }

  .quick-modal,
  .avatar-lightbox {
    z-index: 230;
  }

  .topbar-action-btn.icon-only .inline-icon,
  .topbar-action-btn.icon-only .btn-icon,
  .pager-actions .btn-mini .btn-icon,
  .pager-actions .btn-mini .inline-icon {
    position: static;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    overflow: visible;
    clip: auto;
    white-space: normal;
    display: inline-grid;
  }

  @media (max-width: 640px) {
      .pager-actions .btn-mini>span:not(.btn-icon):not(.inline-icon) {
        display: none;
      }
  }

  html body .sidebar .nav button.active,
  html body .side-collapsed .sidebar .nav button.active {
    background: color-mix(in srgb, var(--text) 13%, transparent);
    color: var(--text);
    border-color: color-mix(in srgb, var(--text) 12%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 13%, transparent), 0 1px 2px rgba(0, 0, 0, .045);
  }

  html[data-theme="dark"] body .sidebar .nav button.active,
  html[data-theme="dark"] body .side-collapsed .sidebar .nav button.active {
    background: color-mix(in srgb, var(--text) 15%, transparent);
    border-color: color-mix(in srgb, var(--text) 13%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 14%, transparent), 0 1px 2px rgba(0, 0, 0, .22);
  }

  html body .sidebar .nav button.active:hover:not(:disabled),
  html body .side-collapsed .sidebar .nav button.active:hover:not(:disabled) {
    background: color-mix(in srgb, var(--text) 17%, transparent);
    border-color: color-mix(in srgb, var(--text) 15%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 16%, transparent), 0 1px 3px rgba(0, 0, 0, .06);
  }

  html[data-theme="dark"] body .sidebar .nav button.active:hover:not(:disabled),
  html[data-theme="dark"] body .side-collapsed .sidebar .nav button.active:hover:not(:disabled) {
    background: color-mix(in srgb, var(--text) 19%, transparent);
    border-color: color-mix(in srgb, var(--text) 16%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 17%, transparent), 0 1px 3px rgba(0, 0, 0, .25);
  }

  html body .sidebar .nav button.active .nav-icon,
  html body .side-collapsed .sidebar .nav button.active .nav-icon,
  html body .sidebar .nav button.active .nav-label {
    color: var(--text);
  }

  html body .cal .cal-grid button {
    background: transparent;
    border-color: transparent;
    color: var(--text);
    box-shadow: none;
  }

  html body .cal .cal-grid button:hover:not(:disabled):not(.sel):not([aria-selected="true"]):not([data-selected="true"]) {
    background: var(--cgpt-hover-bg-strong);
    border-color: transparent;
    box-shadow: var(--cgpt-hover-shadow);
  }

  html body .cal .cal-grid button:active:not(:disabled) {
    background: var(--cgpt-pressed-bg);
    box-shadow: var(--cgpt-pressed-shadow);
  }

  html body .cal .cal-grid button.today:not(.sel):not([aria-selected="true"]):not([data-selected="true"]) {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent);
  }

  html body .cal .cal-grid button.focus-day:not(.sel):not([aria-selected="true"]):not([data-selected="true"]) {
    background: color-mix(in srgb, var(--text) 9%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 16%, transparent), 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
  }

  html body .cal .cal-grid button.sel,
  html body .cal .cal-grid button[aria-selected="true"],
  html body .cal .cal-grid button[data-selected="true"] {
    background: color-mix(in srgb, var(--accent) 18%, var(--surface-hover));
    color: var(--text);
    border-color: color-mix(in srgb, var(--accent) 68%, transparent);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 90%, transparent), 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent), 0 3px 10px rgba(0, 0, 0, .14);
    font-weight: 950;
    transform: none;
  }

  html[data-theme="dark"] body .cal .cal-grid button.sel,
  html[data-theme="dark"] body .cal .cal-grid button[aria-selected="true"],
  html[data-theme="dark"] body .cal .cal-grid button[data-selected="true"] {
    background: color-mix(in srgb, var(--text) 22%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 70%, transparent);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 92%, transparent), 0 0 0 4px color-mix(in srgb, var(--accent) 24%, transparent), 0 3px 12px rgba(0, 0, 0, .42);
  }

  html body .cal .cal-grid button.sel:hover:not(:disabled),
  html body .cal .cal-grid button[aria-selected="true"]:hover:not(:disabled),
  html body .cal .cal-grid button[data-selected="true"]:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent) 22%, var(--surface-hover));
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 96%, transparent), 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent), 0 4px 13px rgba(0, 0, 0, .16);
  }

  html[data-theme="dark"] body .cal .cal-grid button.sel:hover:not(:disabled),
  html[data-theme="dark"] body .cal .cal-grid button[aria-selected="true"]:hover:not(:disabled),
  html[data-theme="dark"] body .cal .cal-grid button[data-selected="true"]:hover:not(:disabled) {
    background: color-mix(in srgb, var(--text) 26%, var(--surface));
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 96%, transparent), 0 0 0 5px color-mix(in srgb, var(--accent) 26%, transparent), 0 4px 14px rgba(0, 0, 0, .48);
  }

  html body .cal .cal-grid button:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 76%, transparent), 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
  }

  html body .cal .cal-grid button.sel:focus-visible,
  html body .cal .cal-grid button[aria-selected="true"]:focus-visible,
  html body .cal .cal-grid button[data-selected="true"]:focus-visible {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 96%, transparent), 0 0 0 5px color-mix(in srgb, var(--accent) 25%, transparent), 0 4px 14px rgba(0, 0, 0, .18);
  }

  .sidebar-brand {
    justify-content: flex-start;
    align-items: center;
    gap: .75rem;
  }

  .side-collapsed .sidebar-brand-text {
    display: none;
  }

  .side-collapsed .sidebar-brand {
    justify-content: center;
  }

  .top-profile-btn {
    border-radius: 999px;
    padding: .12rem;
    display: inline-grid;
    place-items: center;
    background: color-mix(in srgb,var(--surface) 88%,transparent);
    border: 1px solid var(--border);
    box-shadow: none;
  }

  .top-profile-btn:hover {
    background: var(--surface-hover);
  }

  .top-profile-avatar,
  .top-profile-avatar .avatar,
  .top-profile-avatar img,
  .top-profile-avatar .avatar-img {
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: 999px;
  }

  .theme-toggle-btn {
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: color-mix(in srgb,var(--surface) 86%,transparent);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0;
  }

  .theme-toggle-btn:hover {
    background: var(--surface-hover);
  }

  .danger-menu-item {
    color: var(--danger);
    border-color: color-mix(in srgb,var(--danger) 28%,var(--border));
    background: color-mix(in srgb,var(--danger) 7%,var(--surface));
  }

  .danger-menu-item:hover:not(:disabled) {
    background: color-mix(in srgb,var(--danger) 12%,var(--surface-hover));
    border-color: color-mix(in srgb,var(--danger) 45%,var(--border));
  }

  .modal,
  .quick-modal,
  .avatar-lightbox {
    background: rgba(0,0,0,.58);
  }

  .modal-card,
  .quick-modal-card,
  .avatar-lightbox-card {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: min(92vh,900px);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 24px 80px color-mix(in srgb,#000 34%,transparent);
  }

  .modal-close {
    inline-size: 2.2rem;
    block-size: 2.2rem;
    border-radius: .85rem;
    padding: 0;
    display: inline-grid;
    place-items: center;
  }

  .modal-footer:empty {
    display: none;
  }

  .permissions-card #tblPermissions th:not(:first-child),
  .permissions-card #tblPermissions td:not(:first-child) {
    text-align: center;
    vertical-align: middle;
  }

  html body .perm-check {
    inline-size: 2rem;
    block-size: 2rem;
    padding: 0;
    margin: 0 auto;
    border: 0;
    background: transparent;
    box-shadow: none;
    display: inline-grid;
    place-items: center;
  }

  html body .perm-check.on .perm-box,
  html body .perm-check:has(input:checked) .perm-box,
  html body .perm-check input:checked + .perm-box {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }

  @media (max-width:640px) {
      .modal-card,
      .quick-modal-card {
        width: min(96vw,42rem);
        max-height: 94vh;
      }
  }

  .modal.open .modal-footer:not(:empty),
  .modal-card .modal-footer:not(:empty),
  .quick-modal-card .modal-footer:not(:empty),
  .avatar-lightbox-card .modal-footer:not(:empty) {
    display: flex;
  }

  html body .modal-card {
    width: min(var(--modal-width,40rem),calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
  }

  @media (max-width:640px) {
      html body .modal-card,
      html body .quick-modal-card {
        width: min(96vw,calc(100vw - .75rem));
        max-width: calc(100vw - .75rem);
      }
  }

  .data-table tbody tr[hidden] {
    display: none;
  }

  html body .avatar-file-native {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    pointer-events: none;
  }

  html body .avatar-picker {
    display: grid;
    justify-items: center;
    gap: .65rem;
    inline-size: 100%;
  }

  html body .image-field {
    display: grid;
    justify-items: center;
  }

  html body .image-picker-preview,
  html body .image-picker-preview.avatar-preview,
  html body .image-picker-preview.logo-preview {
    inline-size: min(100%,22rem);
    block-size: auto;
    max-inline-size: 22rem;
    margin-inline: auto;
    display: grid;
    gap: .6rem;
    place-items: stretch;
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
  }

  html body .image-picker-frame {
    inline-size: 100%;
    aspect-ratio: 1/1;
    padding: 0;
    border-radius: 1.45rem;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: color-mix(in srgb,var(--surface-alt) 86%,#000 14%);
    border: 1px solid var(--border);
    box-shadow: inset 0 0 0 1px color-mix(in srgb,#fff 7%,transparent),0 18px 38px color-mix(in srgb,#000 18%,transparent);
    cursor: pointer;
  }

  html body .image-picker-frame img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
  }

  html body .image-picker-preview[data-image-kind="logo"] .image-picker-frame img {
    object-fit: contain;
    padding: 1rem;
    background: var(--surface);
  }

  html body .image-picker-actions {
    display: flex;
    justify-content: center;
    gap: .45rem;
    inline-size: 100%;
  }

  html body .image-picker-btn {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    padding: .45rem .75rem;
    min-block-size: 2.25rem;
  }

  html body .image-picker-btn:hover:not(:disabled) {
    background: color-mix(in srgb,var(--text) 8%,transparent);
  }

  @media (max-width:640px) {
      html body .image-picker-preview,
      html body .image-picker-preview.avatar-preview,
      html body .image-picker-preview.logo-preview {
        inline-size: 100%;
        max-inline-size: 100%;
      }
  }

  button:disabled,
  [disabled] {
    cursor: not-allowed;
  }

  .table-filter-box .table-filter,
  .table-filter-box input {
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .avatar-file-native {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    pointer-events: none;
  }

  @media (max-width: 720px) {
      .dashboard-kpis,
      .grid.cols4,
      .grid.cols3,
      .grid.cols2 {
        grid-template-columns: 1fr;
      }

      table.data-table,
      table.data-table thead,
      table.data-table tbody,
      table.data-table tfoot,
      table.data-table tr,
      table.data-table th,
      table.data-table td {
        display: block;
        width: 100%;
        min-width: 0;
      }

      table.data-table tbody {
        display: grid;
      }

      table.data-table td {
        display: grid;
      }
  }

  @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: 1ms;
        animation-iteration-count: 1;
        scroll-behavior: auto;
        transition-duration: 1ms;
      }
  }

  @media print {
      .sidebar,
      .topbar,
      .mobile-overlay,
      .table-tools,
      .pager,
      .modal,
      .toast-stack {
        display: none;
      }

      .main {
        margin: 0;
        max-width: none;
        padding: 0;
      }

      .card,
      .data-table-shell {
        box-shadow: none;
        border-color: #ddd;
      }

      body {
        background: #fff;
        color: #111;
      }
  }

  .cal-scrim {
    background: rgba(15, 23, 42, .08);
  }

  html[data-theme="dark"] .cal-scrim {
    background: rgba(0, 0, 0, .18);
  }

  .cal {
    background: color-mix(in srgb, var(--surface) 96%, var(--surface-alt) 4%);
    border-color: color-mix(in srgb, var(--accent) 20%, var(--border));
    box-shadow: 0 28px 78px color-mix(in srgb, #000 28%, transparent), 0 10px 28px color-mix(in srgb, #000 16%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 30%, transparent);
  }

  html[data-theme="dark"] .cal {
    background: color-mix(in srgb, var(--surface) 92%, #000 8%);
    border-color: color-mix(in srgb, var(--accent) 26%, var(--border));
    box-shadow: 0 30px 90px rgba(0,0,0,.62), 0 8px 26px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.08);
  }

  .cal.mobile-cal-modal {
    box-shadow: 0 30px 90px color-mix(in srgb, #000 36%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 28%, transparent);
  }

  @media (max-width: 720px) {
      .data-table-shell .table-wrap,
      .table-wrap:has(table.data-table) {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
        overscroll-behavior: auto;
      }

      .data-table-shell table.data-table,
      .table-wrap table.data-table {
        display: table;
        width: 100%;
        min-width: max(760px, var(--tbl-min, 760px));
        border-collapse: separate;
        border-spacing: 0;
        table-layout: auto;
      }

      .data-table-shell table.data-table thead,
      .table-wrap table.data-table thead {
        display: table-header-group;
        position: static;
        inline-size: auto;
        block-size: auto;
        overflow: visible;
        clip: auto;
        white-space: normal;
      }

      .data-table-shell table.data-table tbody,
      .table-wrap table.data-table tbody {
        display: table-row-group;
        padding: 0;
        background: transparent;
      }

      .data-table-shell table.data-table tfoot,
      .table-wrap table.data-table tfoot {
        display: table-footer-group;
      }

      .data-table-shell table.data-table tr,
      .table-wrap table.data-table tr {
        display: table-row;
        width: auto;
        margin: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        overflow: visible;
      }

      .data-table-shell table.data-table th,
      .data-table-shell table.data-table td,
      .table-wrap table.data-table th,
      .table-wrap table.data-table td {
        display: table-cell;
        width: auto;
        min-width: inherit;
        padding: .58rem .7rem;
        vertical-align: middle;
        border-bottom: 1px solid var(--border);
        text-align: start;
        background-clip: padding-box;
      }

      .data-table-shell table.data-table th,
      .table-wrap table.data-table th {
        position: sticky;
        inset-block-start: 0;
        z-index: 3;
        background: color-mix(in srgb, var(--surface-alt) 96%, var(--surface));
      }

      .data-table-shell table.data-table tfoot td,
      .table-wrap table.data-table tfoot td {
        position: sticky;
        inset-block-end: 0;
        z-index: 2;
        background: color-mix(in srgb, var(--surface-alt) 96%, var(--surface));
      }

      .data-table-shell table.data-table td::before,
      .data-table-shell table.data-table tfoot td::before,
      .table-wrap table.data-table td::before,
      .table-wrap table.data-table tfoot td::before {
        content: none;
        display: none;
      }

      .data-table-shell table.data-table .cell-inner,
      .table-wrap table.data-table .cell-inner {
        max-width: 22rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        overflow-wrap: normal;
        text-align: inherit;
      }
  }

  .native-select-source {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .native-combobox .native-combobox-toggle,
  html body .native-combobox .native-combobox-toggle {
    position: absolute;
    inset-inline-end: .42rem;
    top: 50%;
    transform: translateY(-50%);
    inline-size: 1.9rem;
    block-size: 1.9rem;
    min-inline-size: 1.9rem;
    min-block-size: 1.9rem;
    padding: 0;
    margin: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: .72rem;
    background: transparent;
    color: var(--muted);
    box-shadow: none;
    line-height: 1;
    cursor: pointer;
    transition: background .14s ease, color .14s ease;
  }

  .native-combobox .native-combobox-toggle:hover,
  .native-combobox .native-combobox-toggle:active,
  .native-combobox .native-combobox-toggle:focus-visible,
  html body .native-combobox .native-combobox-toggle:hover,
  html body .native-combobox .native-combobox-toggle:active,
  html body .native-combobox .native-combobox-toggle:focus-visible {
    transform: translateY(-50%);
    background: var(--surface-hover);
    color: var(--text);
    box-shadow: none;
  }

  .native-combobox .native-combobox-toggle .btn-icon,
  .native-combobox .native-combobox-toggle:hover .btn-icon,
  .native-combobox .native-combobox-toggle:active .btn-icon,
  .native-combobox .native-combobox-toggle .btn-icon svg,
  .native-combobox .native-combobox-toggle:hover .btn-icon svg,
  .native-combobox .native-combobox-toggle:active .btn-icon svg {
    inline-size: 1.05rem;
    block-size: 1.05rem;
    transform: none;
    transition: none;
    color: currentColor;
  }

  .native-combobox .native-combobox-input,
  html body .native-combobox .native-combobox-input {
    padding-inline-end: 2.75rem;
  }

  @media (max-width: 900px) {
      .main,
      html[dir="ltr"] .main {
        margin: 0;
        max-width: 100%;
        padding-block-start: calc(var(--topbar-h) + var(--main-pad, .75rem));
        padding-block-end: calc(var(--mobile-bottom-nav-h) + .85rem);
      }

      .topbar {
        inset-inline: 0;
        inline-size: auto;
        min-height: var(--topbar-h);
      }

      .topbar-title-block {
        grid-template-columns: minmax(0, 1fr);
      }

      .topbar-title-block > .sidebar-open-btn,
      .sidebar .side-actions,
      .sidebar .sidebar-brand,
      .sidebar .footer-name,
      .sidebar .nav-group-label,
      .mobile-overlay,
      .mobile-overlay.open {
        display: none;
      }

      .topbar-title-block > #pageTitle,
      .topbar-title-block > #todayLine {
        grid-column: 1;
        min-width: 0;
      }

      .sidebar,
      .side-collapsed .sidebar,
      html[dir="ltr"] .sidebar,
      html[dir="ltr"].side-collapsed .sidebar {
        position: fixed;
        inset-block-start: auto;
        inset-block-end: 0;
        inset-inline-start: 0;
        inset-inline-end: 0;
        inline-size: 100%;
        width: 100%;
        max-inline-size: 100%;
        max-width: 100%;
        block-size: var(--mobile-bottom-nav-h);
        min-block-size: var(--mobile-bottom-nav-h);
        height: var(--mobile-bottom-nav-h);
        padding: .44rem max(.65rem, env(safe-area-inset-left, 0px)) calc(.44rem + env(safe-area-inset-bottom, 0px)) max(.65rem, env(safe-area-inset-right, 0px));
        transform: none;
        translate: none;
        display: block;
        overflow: hidden;
        z-index: 125;
        border: 0;
        border-block-start: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
        background: color-mix(in srgb, var(--surface) 88%, transparent);
        box-shadow: 0 -10px 30px color-mix(in srgb, #000 14%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent);
        backdrop-filter: saturate(180%) blur(18px);
        -webkit-backdrop-filter: saturate(180%) blur(18px);
      }

      html[data-theme="dark"] .sidebar,
      html[data-theme="dark"] .side-collapsed .sidebar {
        background: color-mix(in srgb, var(--surface) 82%, #000 18%);
        border-block-start-color: color-mix(in srgb, var(--border) 80%, transparent);
        box-shadow: 0 -14px 38px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .06);
      }

      .sidebar .nav,
      .side-collapsed .sidebar .nav,
      html body .sidebar .nav {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: .38rem;
        inline-size: 100%;
        block-size: 100%;
        height: 100%;
        padding: .08rem .02rem;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
      }

      .sidebar .nav::-webkit-scrollbar,
      .side-collapsed .sidebar .nav::-webkit-scrollbar {
        display: none;
      }

      .sidebar .nav-group,
      .side-collapsed .sidebar .nav-group {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: .38rem;
        flex: 0 0 auto;
        min-inline-size: max-content;
      }

      html body .sidebar .nav button,
      html body .side-collapsed .sidebar .nav button {
        flex: 0 0 clamp(4.35rem, 20.5vw, 5.85rem);
        inline-size: clamp(4.35rem, 20.5vw, 5.85rem);
        width: clamp(4.35rem, 20.5vw, 5.85rem);
        block-size: 100%;
        height: 100%;
        min-block-size: 3.65rem;
        min-height: 3.65rem;
        padding: .34rem .42rem .48rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .24rem;
        border-radius: 1.05rem;
        white-space: nowrap;
        text-align: center;
      }

      html body .sidebar .nav button:active:not(:disabled),
      html body .side-collapsed .sidebar .nav button:active:not(:disabled) {
        transform: scale(.975);
      }

      html body .sidebar .nav button.active,
      html body .side-collapsed .sidebar .nav button.active {
        background: color-mix(in srgb, var(--accent) 13%, var(--surface) 87%);
        border-color: color-mix(in srgb, var(--accent) 26%, transparent);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent), 0 4px 14px color-mix(in srgb, var(--accent) 10%, transparent);
      }

      html[data-theme="dark"] body .sidebar .nav button.active,
      html[data-theme="dark"] body .side-collapsed .sidebar .nav button.active {
        background: color-mix(in srgb, var(--accent) 17%, var(--surface) 83%);
        border-color: color-mix(in srgb, var(--accent) 30%, transparent);
      }

      html body .sidebar .nav button.active::before,
      html body .side-collapsed .sidebar .nav button.active::before {
        content: "";
        position: absolute;
        inset-inline: 31%;
        inset-block-start: auto;
        inset-block-end: .18rem;
        inline-size: auto;
        block-size: 3px;
        width: auto;
        height: 3px;
        transform: none;
        border-radius: 999px;
        background: var(--accent);
        opacity: 1;
      }

      html body .sidebar .nav button .nav-icon,
      html body .side-collapsed .sidebar .nav button .nav-icon {
        inline-size: 1.35rem;
        block-size: 1.35rem;
        flex-basis: 1.35rem;
        margin: 0;
        color: currentColor;
      }

      html body .sidebar .nav button .nav-icon svg,
      html body .side-collapsed .sidebar .nav button .nav-icon svg {
        inline-size: 1.25rem;
        block-size: 1.25rem;
      }

      html body .sidebar .nav button:hover .nav-icon,
      html body .side-collapsed .sidebar .nav button:hover .nav-icon {
        transform: none;
      }

      .sidebar .nav-label,
      .side-collapsed .sidebar .nav-label {
        display: block;
        max-inline-size: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: .74rem;
        line-height: 1.12;
        font-weight: 800;
        text-align: center;
      }
  }

  @media (max-width: 380px) {
      html body .sidebar .nav button,
      html body .side-collapsed .sidebar .nav button {
        flex-basis: 4rem;
        inline-size: 4rem;
        width: 4rem;
        padding-inline: .28rem;
      }

      .sidebar .nav-label,
      .side-collapsed .sidebar .nav-label {
        font-size: .69rem;
      }
  }

  @media (max-width: 700px) {
      .table-column-filter-menu {
        inline-size: calc(100vw - 1rem);
      }
  }

  .table-column-filter-menu .table-filter-sort-actions .btn-mini,
  .table-column-filter-menu .table-filter-sort-actions .btn-mini:active,
  .table-column-filter-menu .table-filter-sort-actions .btn-mini:focus,
  .table-column-filter-menu .table-filter-sort-actions .btn-mini:focus-visible {
    transform: none;
  }

  .table-column-filter-menu .table-filter-sort-actions .btn-mini {
    will-change: auto;
  }

  .table-column-filter-menu .table-filter-sort-actions .btn-mini.active {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent);
  }

  .table-column-filter-menu .table-filter-option[hidden],
  .table-column-filter-menu .table-filter-option.is-search-hidden {
    display: none;
  }

  .table-filter-backdrop {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    animation: none;
  }

  html[data-theme="dark"] .table-filter-backdrop {
    background: transparent;
  }

  .table-column-filter-menu {
    box-shadow: 0 24px 62px rgba(15, 23, 42, .24), 0 0 0 1px color-mix(in srgb, var(--accent) 18%, var(--border)) inset;
  }

  html[data-theme="dark"] .table-column-filter-menu {
    box-shadow: 0 26px 68px rgba(0, 0, 0, .46), 0 0 0 1px color-mix(in srgb, var(--accent) 18%, var(--border)) inset;
  }

  .table-filter-sort-actions {
    grid-template-columns: repeat(3, 2.35rem);
    gap: .38rem;
  }

  .table-filter-sort-actions .table-sort-icon-btn,
  .table-filter-sort-actions .table-sort-clear-btn {
    inline-size: 2.35rem;
    min-inline-size: 2.35rem;
    max-inline-size: 2.35rem;
    block-size: 2.35rem;
    min-height: 2.35rem;
    padding: 0;
    display: inline-grid;
    place-items: center;
  }

  .table-filter-sort-actions .table-sort-icon-btn span:last-child {
    max-inline-size: none;
    overflow: visible;
  }

  .table-filter-sort-actions .btn-mini::after,
  .table-filter-sort-actions .btn-mini::before {
    display: none;
  }

  @media (max-width: 700px) {
      .table-filter-backdrop {
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }

      .table-column-filter-menu {
        box-shadow: 0 22px 58px rgba(0, 0, 0, .36), 0 0 0 1px color-mix(in srgb, var(--accent) 18%, var(--border)) inset;
      }

      .table-filter-sort-actions {
        grid-template-columns: repeat(3, 2.4rem);
      }

      .table-filter-sort-actions .table-sort-icon-btn,
      .table-filter-sort-actions .table-sort-clear-btn {
        inline-size: 2.4rem;
        min-inline-size: 2.4rem;
        block-size: 2.4rem;
        min-height: 2.4rem;
      }
  }

  html body .data-table-shell table.data-table tbody tr[hidden],
  html body .table-wrap table.data-table tbody tr[hidden],
  html body .data-table-shell table.data-table tbody tr.is-table-row-hidden,
  html body .table-wrap table.data-table tbody tr.is-table-row-hidden {
    display: none;
    visibility: hidden;
  }

  .field input[type="number"],
  .field input[inputmode="numeric"],
  .field input[inputmode="decimal"],
  .field input[data-numeric="true"],
  input[type="number"],
  input[inputmode="numeric"],
  input[inputmode="decimal"] {
    direction: ltr;
    text-align: left;
    unicode-bidi: isolate;
  }

  @media (max-width: 900px) {
      #content.is-swipe-dragging {
        transition: none;
      }

      .sidebar .nav,
      .side-collapsed .sidebar .nav,
      html body .sidebar .nav {
        position: relative;
      }

      html.page-swipe-live .sidebar .nav .mobile-swipe-nav-indicator {
        transition: none;
      }

      html body .sidebar .nav button,
      html body .side-collapsed .sidebar .nav button {
        position: relative;
      }

      html body .sidebar .nav button.swipe-preview,
      html body .side-collapsed .sidebar .nav button.swipe-preview {
        color: var(--text);
        background: color-mix(in srgb, var(--accent) 16%, var(--surface) 84%);
        border-color: color-mix(in srgb, var(--accent) 32%, transparent);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
        transform: translateY(calc(var(--swipe-nav-progress, 0) * -1px)) scale(calc(1 + (var(--swipe-nav-progress, 0) * .022)));
      }
  }

  @media (prefers-reduced-motion: reduce) {
      .mobile-page-swipe-stage.is-swipe-animating .mobile-page-swipe-panel,
      .sidebar .nav .mobile-swipe-nav-indicator {
        transition: none;
      }
  }

  .sidebar,
  .side-collapsed .sidebar {
    background: var(--surface-alt);
    border-inline-start: 0;
    border-inline-end: 0;
    box-shadow: none;
  }

  html[dir="ltr"] .sidebar,
  html[dir="ltr"].side-collapsed .sidebar {
    border-inline-start: 0;
    border-inline-end: 0;
  }

  .topbar {
    background: var(--surface-alt);
    border: 0;
    box-shadow: none;
    border-radius: 0;
  }

  .sidebar.mobile-bottom-nav,
  .mobile-bottom-nav-mode .sidebar,
  .mobile-bottom-nav-mode .side-collapsed .sidebar {
    background: var(--surface-alt);
    border: 0;
    box-shadow: none;
  }

  html body .nav-icon,
  html body .app-icon-inline,
  html body .btn-icon,
  html body .inline-icon {
    inline-size: 1.42rem;
    block-size: 1.42rem;
    flex-basis: 1.42rem;
  }

  html body .nav-icon svg,
  html body .app-icon-inline svg,
  html body .btn-icon svg,
  html body .inline-icon svg {
    inline-size: 1.32rem;
    block-size: 1.32rem;
    stroke-width: 2.05;
  }

  html body .icon-only,
  html body .topbar-action-btn,
  html body .topbar-menu-btn,
  html body .sidebar-open-btn,
  html body .sidebar-close-btn {
    inline-size: 2.55rem;
    block-size: 2.55rem;
    min-height: 2.55rem;
  }

  .data-table-shell table.data-table th,
  .data-table-shell table.data-table td,
  table.data-table th,
  table.data-table td {
    height: var(--tbl-row-h);
    min-height: var(--tbl-row-h);
    padding: .32rem .54rem;
    line-height: 1.22;
    vertical-align: middle;
  }

  .data-table-shell table.data-table tbody tr,
  table.data-table tbody tr {
    height: var(--tbl-row-h);
  }

  .data-table-shell .cell-inner,
  table.data-table .cell-inner {
    line-height: 1.22;
  }

  .data-table-shell table.data-table tfoot td,
  table.data-table tfoot td {
    height: calc(var(--tbl-row-h) * 1.7);
    min-height: calc(var(--tbl-row-h) * 1.7);
    padding-block: .4rem;
  }

  input[type="number"],
  input[inputmode="numeric"],
  input[inputmode="decimal"],
  .num,
  [dir="ltr"].numeric {
    direction: ltr;
    text-align: left;
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
  }

  @media (max-width:900px) {
      .topbar {
        border-radius: 0;
      }
  }

  .topbar,
  html body .topbar {
    border-radius: 0;
  }

  @media (max-width:900px) {
      .topbar,
      html body .topbar {
        border-radius: 0;
      }
  }

  html body .sidebar,
  html body.side-collapsed .sidebar {
    background: var(--surface-alt);
    border: 0;
    border-inline-end: 1px solid var(--border);
    box-shadow: none;
  }

  html body .topbar {
    background: var(--surface-alt);
    border: 0;
    border-block-end: 1px solid var(--border);
    box-shadow: none;
    border-radius: 0;
  }

  html body .sidebar-brand.top-user,
  html body .top-user.sidebar-brand {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: .82rem;
    padding: .46rem .48rem;
    margin: 0;
    cursor: pointer;
    user-select: none;
    min-height: 3.35rem;
    transition: background-color .14s ease, transform .08s ease, color .14s ease;
  }

  html body .sidebar-brand.top-user:hover,
  html body .top-user.sidebar-brand:hover {
    background: color-mix(in srgb, var(--surface-hover) 74%, transparent);
  }

  html body .sidebar-brand.top-user:active,
  html body .top-user.sidebar-brand:active {
    transform: translateY(1px) scale(.992);
  }

  html body .sidebar-brand.top-user:focus-visible,
  html body .top-user.sidebar-brand:focus-visible {
    outline: none;
    box-shadow: var(--focus);
  }

  html body .sidebar-brand .brand-logo-img,
  html body .top-user.sidebar-brand .brand-logo-img {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    border-radius: .65rem;
  }

  @media (max-width:900px) {
      html body .topbar {
        border-block-end: 1px solid var(--border);
        border-radius: 0;
        margin: 0;
      }
  }

  .nav-group-label {
    display: none;
  }

  .data-table-shell .table-wrap.table-compact,
  .data-table-shell .table-wrap.table-medium,
  .data-table-shell .table-wrap.table-wide {
    height: auto;
    min-height: auto;
  }

  .data-table-shell.table-is-empty .table-wrap {
    min-height: 7.25rem;
  }

  html,
  body {
    overflow-y: hidden;
  }

  .main,
  html[dir="ltr"] .main {
    position: fixed;
    inset-block-start: var(--topbar-h);
    inset-block-end: 0;
    inset-inline-start: var(--side);
    inset-inline-end: 0;
    block-size: auto;
    height: auto;
    min-height: 0;
    inline-size: auto;
    width: auto;
    max-width: none;
    margin: 0;
    padding: var(--main-pad, 1rem);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: auto;
  }

  .main,
  #content,
  .modal-body,
  .quick-modal-card,
  .table-wrap,
  .data-table-shell .table-wrap,
  .cal,
  .topbar-menu {
    scrollbar-gutter: auto;
  }

  @media (max-width: 900px) {
      html,
      body {
        height: auto;
        min-height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior-y: auto;
      }

      .app {
        height: auto;
        min-height: 100dvh;
        overflow: visible;
      }

      .main,
      html[dir="ltr"] .main {
        position: relative;
        inset-block-start: auto;
        inset-block-end: auto;
        inset-inline-start: auto;
        inset-inline-end: auto;
        block-size: auto;
        height: auto;
        min-height: calc(100dvh - var(--topbar-h, 3.95rem));
        inline-size: auto;
        width: auto;
        max-width: 100%;
        margin: 0;
        padding-block-start: calc(var(--topbar-h, 3.95rem) + var(--main-pad, .75rem));
        padding-inline: var(--main-pad, .75rem);
        padding-block-end: calc(var(--mobile-bottom-nav-h, calc(4.95rem + env(safe-area-inset-bottom, 0px))) + .85rem);
        overflow: visible;
        overflow-y: visible;
        overflow-x: hidden;
        overscroll-behavior-y: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: auto;
        touch-action: pan-y;
      }
  }

  @media print {
      html,
      body,
      .app,
      .main {
        position: static;
        height: auto;
        min-height: 0;
        overflow: visible;
      }
  }

  html body .sidebar,
  html body.side-collapsed .sidebar,
  html[dir="ltr"] body .sidebar,
  html[dir="ltr"] body.side-collapsed .sidebar {
    border-inline-start: 0;
    border-inline-end: 0;
    border-left: 0;
    border-right: 0;
    box-shadow: none;
    background: var(--surface-alt);
  }

  html body .topbar {
    background: var(--surface-alt);
    box-shadow: none;
  }

  .form-error[hidden] {
    display: none;
  }

  html body .modal.open,
  html body .quick-modal.open {
    display: grid;
    place-items: center;
    overflow: hidden;
  }

  html body .modal-card,
  html body .quick-modal-card {
    display: flex;
    flex-direction: column;
    max-height: min(92dvh, 900px);
    overflow: hidden;
  }

  html body .modal-head,
  html body .modal-footer {
    flex: 0 0 auto;
  }

  html body .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
  }

  html body .modal[data-stack-depth]:not([data-stack-depth="0"]) .modal-card {
    box-shadow: 0 28px 90px color-mix(in srgb, #000 42%, transparent);
  }

  @media (max-width: 640px) {
      html body .modal,
      html body .quick-modal {
        padding: .5rem;
        align-items: stretch;
      }

      html body .modal-card,
      html body .quick-modal-card {
        max-height: calc(100dvh - 1rem);
      }

      .audit-popover {
        left: .5rem;
        right: .5rem;
      }
  }

  .mobile-modal-close-bottom {
    display: none;
  }

  @media (max-width: 720px) {
      .modal .modal-footer .mobile-modal-close-bottom,
      .quick-modal .modal-footer .mobile-modal-close-bottom {
        display: inline-flex;
      }

      .modal .data-table-shell .table-wrap,
      .modal .table-wrap:has(table.data-table) {
        max-height: min(62vh, 480px);
        overflow: auto;
        -webkit-overflow-scrolling: touch;
      }

      .modal .data-table-shell table.data-table,
      .modal .table-wrap table.data-table {
        display: table;
        width: 100%;
        min-width: max(720px, var(--tbl-min, 720px));
        table-layout: auto;
      }

      .modal .data-table-shell table.data-table thead,
      .modal .table-wrap table.data-table thead {
        display: table-header-group;
        position: static;
        inline-size: auto;
        block-size: auto;
        overflow: visible;
        clip: auto;
        white-space: normal;
      }

      .modal .data-table-shell table.data-table tbody,
      .modal .table-wrap table.data-table tbody {
        display: table-row-group;
        padding: 0;
        background: transparent;
      }

      .modal .data-table-shell table.data-table tfoot,
      .modal .table-wrap table.data-table tfoot {
        display: table-footer-group;
        position: static;
        inline-size: auto;
        block-size: auto;
        overflow: visible;
        clip: auto;
        white-space: normal;
      }

      .modal .data-table-shell table.data-table tr,
      .modal .table-wrap table.data-table tr {
        display: table-row;
        width: auto;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
      }

      .modal .data-table-shell table.data-table th,
      .modal .data-table-shell table.data-table td,
      .modal .table-wrap table.data-table th,
      .modal .table-wrap table.data-table td {
        display: table-cell;
        width: auto;
        min-width: inherit;
        vertical-align: middle;
      }

      .modal .data-table-shell table.data-table tfoot td,
      .modal .table-wrap table.data-table tfoot td {
        position: sticky;
        inset-block-end: 0;
        z-index: 4;
        background: color-mix(in srgb, var(--surface-alt) 97%, var(--surface));
        box-shadow: 0 -1px 0 var(--border), 0 -8px 18px color-mix(in srgb, #000 8%, transparent);
      }

      .modal .data-table-shell table.data-table td::before,
      .modal .data-table-shell table.data-table tfoot td::before,
      .modal .table-wrap table.data-table td::before,
      .modal .table-wrap table.data-table tfoot td::before {
        content: none;
        display: none;
      }
  }

  .data-table-shell .table-tools {
    display: grid;
    grid-template-columns: minmax(15.5rem, var(--side, 288px)) minmax(0, 1fr) 2rem;
    align-items: center;
    gap: .65rem;
    padding-block-end: .08rem;
    margin-bottom: 0;
  }

  .data-table-shell .table-filter-slot {
    grid-column: 1;
    justify-self: start;
    inline-size: min(var(--side, 288px), 28vw);
    min-inline-size: 15.5rem;
    max-inline-size: var(--side, 288px);
    display: flex;
    align-items: center;
    gap: .45rem;
    flex: 0 0 auto;
  }

  .data-table-shell .table-filter-slot .table-filter-box {
    inline-size: 100%;
    min-width: 0;
    max-inline-size: 100%;
    flex: 0 0 100%;
    height: 2.32rem;
    min-height: 2.32rem;
    border-radius: .95rem;
    background: color-mix(in srgb, var(--surface) 96%, var(--bg));
  }

  .data-table-shell .table-filter-slot .table-filter-box .table-filter {
    height: 2.08rem;
    min-height: 2.08rem;
    line-height: 2.08rem;
  }

  .data-table-shell .table-title-box {
    grid-column: 2;
    min-width: 0;
    min-inline-size: 0;
    max-inline-size: 100%;
    max-width: 100%;
    overflow: hidden;
    justify-items: start;
    text-align: start;
    align-items: center;
    align-content: center;
  }

  .data-table-shell .table-title-box .table-title,
  .data-table-shell .table-title-box .table-subtitle {
    display: block;
    max-inline-size: 100%;
    min-inline-size: 0;
    margin-inline: 0 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: start;
    white-space: nowrap;
  }

  .data-table-shell .table-title-box .table-title {
    font-weight: 850;
  }

  .data-table-shell .table-actions-menu-wrap,
  .modal .data-table-shell .table-actions-menu-wrap {
    grid-column: 3;
    justify-self: end;
    position: relative;
    z-index: 25;
    overflow: visible;
    isolation: isolate;
  }

  .data-table-shell .table-actions-menu-btn {
    inline-size: 1.9rem;
    width: 1.9rem;
    min-inline-size: 1.9rem;
    min-width: 1.9rem;
    block-size: 1.9rem;
    height: 1.9rem;
    min-height: 1.9rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: .62rem;
    background: color-mix(in srgb, var(--surface) 96%, var(--bg));
    color: var(--muted);
  }

  .data-table-shell .table-actions-menu-btn .inline-icon,
  .data-table-shell .table-actions-menu-btn .inline-icon svg {
    inline-size: .9rem;
    block-size: .9rem;
    width: .9rem;
    height: .9rem;
    transform: none;
  }

  .data-table-shell .table-actions-menu-btn:hover,
  .data-table-shell .table-actions-menu-wrap.open .table-actions-menu-btn {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
  }

  .data-table-shell .table-actions-menu,
  .modal .data-table-shell .table-actions-menu,
  html[dir="rtl"] .data-table-shell .table-actions-menu,
  html[dir="ltr"] .data-table-shell .table-actions-menu,
  .data-table-shell[dir="rtl"] .table-actions-menu,
  .data-table-shell[dir="ltr"] .table-actions-menu {
    position: absolute;
    inset-block-start: calc(100% + .38rem);
    inset-inline-end: 0;
    min-inline-size: 13.5rem;
    display: none;
    gap: .18rem;
    padding: .45rem;
    border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
    border-radius: 1.05rem;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    box-shadow: 0 30px 78px rgba(0, 0, 0, .34),
    0 14px 32px color-mix(in srgb, var(--accent) 14%, transparent),
    0 0 0 1px color-mix(in srgb, #fff 10%, transparent) inset,
    0 0 0 3px color-mix(in srgb, var(--accent) 8%, transparent);
    backdrop-filter: blur(20px) saturate(1.24);
    -webkit-backdrop-filter: blur(20px) saturate(1.24);
    clip-path: none;
    overflow: visible;
    z-index: 220;
  }

  .data-table-shell .table-actions-menu-wrap.open .table-actions-menu,
  html body .data-table-shell .table-actions-menu-wrap.open .table-actions-menu {
    display: grid;
    animation: menuPop .12s ease both;
  }

  html[data-theme="dark"] .data-table-shell .table-actions-menu,
  html[data-theme="dark"] .modal .data-table-shell .table-actions-menu {
    background: color-mix(in srgb, var(--surface) 82%, rgba(12, 18, 28, .66));
    border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
    box-shadow: 0 34px 90px rgba(0, 0, 0, .68),
    0 16px 36px color-mix(in srgb, var(--accent) 13%, transparent),
    0 0 0 1px rgba(255, 255, 255, .055) inset,
    0 0 0 3px color-mix(in srgb, var(--accent) 9%, transparent);
  }

  .data-table-shell .table-actions-menu::before,
  .data-table-shell .table-actions-menu::after,
  .modal .data-table-shell .table-actions-menu::before,
  .modal .data-table-shell .table-actions-menu::after,
  html[dir="rtl"] .data-table-shell .table-actions-menu::before,
  html[dir="rtl"] .data-table-shell .table-actions-menu::after,
  html[dir="ltr"] .data-table-shell .table-actions-menu::before,
  html[dir="ltr"] .data-table-shell .table-actions-menu::after,
  .data-table-shell[dir="rtl"] .table-actions-menu::before,
  .data-table-shell[dir="rtl"] .table-actions-menu::after,
  .data-table-shell[dir="ltr"] .table-actions-menu::before,
  .data-table-shell[dir="ltr"] .table-actions-menu::after {
    content: none;
    display: none;
    inline-size: 0;
    block-size: 0;
    width: 0;
    height: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .data-table-shell .table-actions-menu button {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 2.25rem;
    justify-content: flex-start;
    gap: .55rem;
    padding: .45rem .6rem;
    border: 0;
    border-radius: .72rem;
    background: transparent;
    box-shadow: none;
    color: var(--text);
    text-align: start;
  }

  .data-table-shell .table-actions-menu button:hover,
  .data-table-shell .table-actions-menu button.active {
    background: var(--surface-hover);
    color: var(--accent);
  }

  .data-table-shell .table-footer-tools,
  .data-table-shell .table-export-actions {
    display: none;
  }

  .data-table td button:not(.audit-mini):not(.icon-only),
  .data-table td .btn-mini {
    min-height: 0;
    height: auto;
    padding: .12rem .24rem;
    border: 0;
    border-radius: .38rem;
    background: transparent;
    box-shadow: none;
    color: var(--accent);
    font-weight: 750;
    line-height: 1.25;
    display: inline-flex;
    vertical-align: baseline;
  }

  .data-table td button:not(.audit-mini):not(.icon-only):hover,
  .data-table td .btn-mini:hover {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent-hover, var(--accent));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
  }

  .data-table td button:not(.audit-mini):not(.table-row-delete) .btn-icon,
  .data-table td button:not(.audit-mini):not(.table-row-delete) .inline-icon {
    display: none;
  }

  .data-table th.table-action-col,
  .data-table td.table-action-col {
    inline-size: 2.35rem;
    width: 2.35rem;
    min-width: 2.35rem;
    max-width: 2.35rem;
    padding-inline: .2rem;
    text-align: center;
  }

  .data-table th.table-action-col .cell-inner,
  .data-table td.table-action-col .cell-inner {
    inline-size: 100%;
    min-inline-size: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    overflow: visible;
  }

  .data-table th.table-action-col .cell-inner {
    font-size: 0;
    color: transparent;
  }

  .data-table th.table-action-col .cell-inner > * {
    display: none;
  }

  .data-table td :is(button.table-row-delete, .table-row-delete) {
    inline-size: 1.95rem;
    min-inline-size: 1.95rem;
    block-size: 1.95rem;
    min-height: 1.95rem;
    padding: 0;
    display: inline-grid;
    place-items: center;
    color: var(--table-delete-danger);
    -webkit-text-fill-color: var(--table-delete-danger);
    background: transparent;
    border: 0;
    border-radius: .62rem;
    box-shadow: none;
    opacity: 1;
    vertical-align: middle;
  }

  .data-table td :is(button.table-row-delete, .table-row-delete, button.table-row-delete .btn-icon, .table-row-delete .btn-icon, button.table-row-delete svg, .table-row-delete svg, button.table-row-delete svg *, .table-row-delete svg *) {
    color: var(--table-delete-danger);
    -webkit-text-fill-color: var(--table-delete-danger);
    stroke: var(--table-delete-danger);
    opacity: 1;
  }

  .data-table td :is(button.table-row-delete .btn-icon, .table-row-delete .btn-icon, button.table-row-delete svg, .table-row-delete svg, button.table-row-delete svg *, .table-row-delete svg *) {
    display: inline-grid;
    inline-size: 1.14rem;
    block-size: 1.14rem;
    width: 1.14rem;
    height: 1.14rem;
    stroke-width: 2.25;
    fill: none;
  }

  .data-table td :is(button.table-row-delete, .table-row-delete):hover {
    background: color-mix(in srgb, var(--table-delete-danger) 10%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--table-delete-danger) 26%, transparent);
    transform: translateY(-1px);
  }

  .data-table-shell .table-wrap,
  .table-wrap:has(table.data-table) {
    overflow: auto;
  }

  .data-table-shell table.data-table tfoot,
  .table-wrap table.data-table tfoot,
  .modal .data-table-shell table.data-table tfoot,
  .modal .table-wrap table.data-table tfoot {
    display: table-footer-group;
    visibility: visible;
    position: static;
    inline-size: auto;
    block-size: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  .data-table-shell table.data-table tfoot tr,
  .table-wrap table.data-table tfoot tr,
  .modal .data-table-shell table.data-table tfoot tr,
  .modal .table-wrap table.data-table tfoot tr {
    display: table-row;
  }

  .data-table-shell table.data-table tfoot td,
  .table-wrap table.data-table tfoot td,
  .modal .data-table-shell table.data-table tfoot td,
  .modal .table-wrap table.data-table tfoot td {
    display: table-cell;
    position: sticky;
    inset-block-end: 0;
    z-index: 4;
    background: color-mix(in srgb, var(--surface-alt) 96%, var(--surface));
    border-block-start: 1px solid var(--border);
    color: var(--text);
  }

  .data-table-shell table.data-table tfoot .footer-stack,
  .table-wrap table.data-table tfoot .footer-stack {
    white-space: nowrap;
  }

  .data-table-shell.table-is-empty table.data-table tfoot {
    display: none;
  }

  .native-combobox.open {
    z-index: 130;
    isolation: isolate;
  }

  .native-combobox.open .native-combobox-input {
    border-color: color-mix(in srgb, var(--accent) 58%, var(--border));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent), 0 12px 30px color-mix(in srgb, #000 12%, transparent);
    background: var(--surface);
  }

  .native-combobox.open .native-combobox-list {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
    box-shadow: 0 18px 52px color-mix(in srgb, #000 22%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
  }

  .app-tooltip {
    white-space: pre-line;
    line-height: 1.48;
    max-width: min(360px, calc(100vw - 16px));
  }

  .audit-mini[data-tooltip] {
    text-decoration: underline dotted color-mix(in srgb, var(--muted) 55%, transparent);
    text-underline-offset: 3px;
  }

  @media (max-width: 900px) {
      .data-table-shell .table-tools {
        grid-template-columns: minmax(0, 1fr) 2rem;
        grid-template-areas: "title actions"
        "filter filter";
        align-items: center;
      }

      .data-table-shell .table-title-box {
        grid-column: auto;
        grid-area: title;
        justify-items: start;
        text-align: start;
        max-width: 100%;
      }

      .data-table-shell .table-actions-menu-wrap {
        grid-column: auto;
        grid-area: actions;
      }

      .data-table-shell .table-filter-slot {
        grid-column: auto;
        grid-area: filter;
        inline-size: 100%;
        min-inline-size: 0;
        max-inline-size: 100%;
      }
  }

  @media (max-width: 720px) {
      .modal .modal-head .modal-close,
      .quick-modal .modal-head .modal-close {
        display: none;
      }

      .modal .modal-footer,
      .quick-modal .modal-footer {
        justify-content: stretch;
      }

      .modal .modal-footer > button,
      .quick-modal .modal-footer > button {
        flex: 1 1 auto;
      }

      .data-table-shell table.data-table,
      .table-wrap table.data-table {
        display: table;
        min-width: max(760px, var(--tbl-min, 760px));
      }

      .data-table-shell table.data-table thead,
      .table-wrap table.data-table thead {
        display: table-header-group;
      }

      .data-table-shell table.data-table tfoot,
      .table-wrap table.data-table tfoot {
        display: table-footer-group;
      }
  }

  .modal-card.ledger-modal-card > .modal-head {
    display: none;
  }

  .modal-card.ledger-modal-card > .modal-body {
    padding: .85rem;
  }

  .modal-card.ledger-modal-card .data-table-shell {
    margin: 0;
  }

  .modal-card.ledger-modal-card .table-title-box {
    gap: .08rem;
  }

  .data-table-shell .table-context-subtitle {
    display: block;
    max-inline-size: 100%;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 750;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ledger-table-header-actions {
    grid-column: 3;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-inline-size: max-content;
  }

  .ledger-table-header-actions .table-actions-menu-wrap {
    grid-column: auto;
    justify-self: auto;
  }

  .ledger-table-close {
    inline-size: 1.9rem;
    min-inline-size: 1.9rem;
    block-size: 1.9rem;
    min-height: 1.9rem;
    padding: 0;
    border-radius: .62rem;
    display: inline-grid;
    place-items: center;
    color: var(--muted);
    background: color-mix(in srgb, var(--surface) 96%, var(--bg));
    border: 1px solid var(--border);
  }

  .ledger-table-close:hover,
  .ledger-table-close:focus-visible {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 34%, var(--border));
    background: color-mix(in srgb, var(--danger) 8%, var(--surface));
  }

  @media (max-width: 900px) {
      .ledger-table-header-actions {
        grid-area: actions;
      }

      .modal-card.ledger-modal-card .table-title-box {
        justify-items: start;
        text-align: start;
      }
  }

  @media (max-width: 560px) {
      .brand-form .brand-form-grid {
        grid-template-columns: 1fr;
      }
  }

  html body .data-table-shell table.data-table th.table-col-hidden,
  html body .data-table-shell table.data-table td.table-col-hidden,
  html body .data-table-shell table.data-table th[hidden],
  html body .data-table-shell table.data-table td[hidden],
  html body .table-wrap table.data-table th.table-col-hidden,
  html body .table-wrap table.data-table td.table-col-hidden,
  html body .table-wrap table.data-table th[hidden],
  html body .table-wrap table.data-table td[hidden],
  html body table.data-table th.table-col-hidden,
  html body table.data-table td.table-col-hidden,
  html body table.data-table th[hidden],
  html body table.data-table td[hidden] {
    display: none;
    visibility: collapse;
    inline-size: 0;
    block-size: 0;
    min-inline-size: 0;
    min-block-size: 0;
    max-inline-size: 0;
    max-block-size: 0;
    padding: 0;
    border: 0;
    margin: 0;
    overflow: hidden;
  }

  html body .table-filter-menu-search input,
  html body .table-filter-menu-search input:focus,
  html body .table-filter-menu-search input:focus-visible,
  html body .table-filter-menu-search input:active {
    border: 0;
    outline: 0;
    box-shadow: none;
    background: transparent;
  }

  html body .table-col-filter-btn.is-sorted .table-col-state,
  html body .table-col-filter-btn.is-filtered .table-col-state,
  html body .table-col-filter-btn.is-sorted:hover .table-col-state,
  html body .table-col-filter-btn.is-sorted:focus-visible .table-col-state,
  html body .table-col-filter-btn.is-sorted[aria-expanded="true"] .table-col-state {
    opacity: 1;
    transform: translateY(0) scale(1);
    inline-size: auto;
    min-inline-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
  }

  html body .table-col-filter-btn.is-sorted .table-sort-mark {
    color: var(--accent);
    font-weight: 950;
    line-height: 1;
  }

  .brand-form-simple .brand-form-section {
    padding: 1rem;
  }

  .brand-form-simple .brand-single-column {
    display: grid;
    grid-template-columns: 1fr;
    gap: .9rem;
    max-inline-size: 24rem;
    margin-inline: auto;
  }

  .brand-form-simple .field {
    margin: 0;
  }

  .brand-form-simple .brand-logo-field .avatar-picker {
    align-items: center;
    justify-content: center;
  }

  .brand-form-simple .brand-logo-field .image-picker-preview {
    margin-inline: auto;
  }

  .brand-form-simple .brand-logo-field label,
  .brand-form-simple .field-help,
  .brand-form-simple .image-picker-note,
  .brand-form-simple .section-head {
    display: none;
  }

  .app-tooltip .app-tooltip-lines {
    display: grid;
    gap: .26rem;
    min-inline-size: min(20rem, calc(100vw - 2rem));
  }

  .app-tooltip .app-tooltip-line {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: start;
    gap: .45rem;
    white-space: nowrap;
  }

  .app-tooltip .app-tooltip-line b {
    color: var(--text);
    font-weight: 850;
  }

  .app-tooltip .app-tooltip-line span {
    color: var(--muted);
    direction: ltr;
    unicode-bidi: isolate;
    text-align: start;
  }

  .app-tooltip.app-tooltip-audit {
    white-space: normal;
    max-width: min(420px, calc(100vw - 16px));
    width: max-content;
  }

  .app-tooltip.app-tooltip-audit .app-tooltip-lines {
    display: grid;
    gap: .34rem;
    min-inline-size: min(22rem, calc(100vw - 2rem));
  }

  .app-tooltip.app-tooltip-audit .app-tooltip-line {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    column-gap: .55rem;
    white-space: normal;
    direction: rtl;
  }

  .app-tooltip.app-tooltip-audit .app-tooltip-line b {
    display: inline-block;
    color: var(--text);
    font-weight: 900;
    white-space: nowrap;
  }

  .app-tooltip.app-tooltip-audit .app-tooltip-line span {
    display: inline-block;
    color: var(--muted);
    direction: ltr;
    unicode-bidi: isolate;
    text-align: start;
    white-space: nowrap;
  }

  @media (max-width: 480px) {
      .app-tooltip.app-tooltip-audit {
        width: calc(100vw - 16px);
      }

      .app-tooltip.app-tooltip-audit .app-tooltip-lines {
        min-inline-size: 0;
      }

      .app-tooltip.app-tooltip-audit .app-tooltip-line span {
        white-space: normal;
      }
  }

  html[dir="rtl"] .data-table-shell,
  html[dir="rtl"] .data-table-shell .table-wrap,
  html[dir="rtl"] .data-table-shell table.data-table,
  html[dir="rtl"] .data-table-shell table.data-table thead,
  html[dir="rtl"] .data-table-shell table.data-table tbody,
  html[dir="rtl"] .data-table-shell table.data-table tfoot,
  html[dir="rtl"] .data-table-shell table.data-table tr,
  html[dir="rtl"] .data-table-shell table.data-table th,
  html[dir="rtl"] .data-table-shell table.data-table td,
  html[dir="rtl"] .table-wrap table.data-table,
  html[dir="rtl"] .table-wrap table.data-table th,
  html[dir="rtl"] .table-wrap table.data-table td {
    direction: rtl;
  }

  html[dir="ltr"] .data-table-shell,
  html[dir="ltr"] .data-table-shell .table-wrap,
  html[dir="ltr"] .data-table-shell table.data-table,
  html[dir="ltr"] .data-table-shell table.data-table thead,
  html[dir="ltr"] .data-table-shell table.data-table tbody,
  html[dir="ltr"] .data-table-shell table.data-table tfoot,
  html[dir="ltr"] .data-table-shell table.data-table tr,
  html[dir="ltr"] .data-table-shell table.data-table th,
  html[dir="ltr"] .data-table-shell table.data-table td,
  html[dir="ltr"] .table-wrap table.data-table,
  html[dir="ltr"] .table-wrap table.data-table th,
  html[dir="ltr"] .table-wrap table.data-table td {
    direction: ltr;
  }

  .data-table-shell table.data-table th,
  .data-table-shell table.data-table td,
  .data-table-shell table.data-table .cell-inner,
  .table-wrap table.data-table th,
  .table-wrap table.data-table td,
  .table-wrap table.data-table .cell-inner {
    text-align: start;
  }

  .data-table-shell table.data-table .num,
  .table-wrap table.data-table .num,
  .data-table-shell table.data-table [data-number],
  .table-wrap table.data-table [data-number] {
    direction: ltr;
    unicode-bidi: isolate;
  }

  @media (max-width: 720px) {
      html[dir="ltr"] table.data-table td,
      html[dir="ltr"] table.data-table td::before,
      html[dir="ltr"] table.data-table td .cell-inner {
        direction: ltr;
        text-align: start;
      }

      html[dir="rtl"] table.data-table td,
      html[dir="rtl"] table.data-table td::before,
      html[dir="rtl"] table.data-table td .cell-inner {
        direction: rtl;
        text-align: start;
      }
  }

  .native-combobox .native-combobox-input,
  html body .native-combobox .native-combobox-input {
    padding-inline-start: .85rem;
    padding-inline-end: 3rem;
    text-align: start;
    text-overflow: ellipsis;
  }

  .native-combobox .native-combobox-toggle,
  html body .native-combobox .native-combobox-toggle {
    inset-inline-end: .45rem;
  }

  .field select,
  .pager-size select,
  .cal select,
  .all-names-category-filter select {
    padding-inline-start: .78rem;
    padding-inline-end: 2.65rem;
    text-align: start;
    text-overflow: ellipsis;
  }

  .all-names-category-filter select {
    padding-block: 0;
  }

  .table-filter-box .table-filter,
  .table-filter-menu-search input {
    padding-inline-start: .15rem;
    padding-inline-end: .35rem;
    text-align: start;
  }

  .table-filter-box .table-filter[dir="auto"],
  .table-filter-menu-search input[dir="auto"],
  .server-auto-search[dir="auto"] {
    unicode-bidi: plaintext;
    text-align: start;
  }

  .inline-input-action input {
    min-width: 0;
    text-align: start;
  }

  html[dir="ltr"] .field input:not([type="number"]):not([type="tel"]):not([type="email"]):not([type="url"]):not([type="password"]):not([type="search"]),
  html[dir="ltr"] .field textarea,
  html[dir="ltr"] .table-filter,
  html[dir="ltr"] .table-filter-menu-search input,
  html[dir="ltr"] input[type="search"],
  html[dir="ltr"] .native-combobox .native-combobox-input {
    direction: ltr;
    text-align: start;
  }

  html[dir="rtl"] .field input:not([type="number"]):not([type="tel"]):not([type="email"]):not([type="url"]):not([type="password"]):not([type="search"]),
  html[dir="rtl"] .field textarea,
  html[dir="rtl"] .table-filter,
  html[dir="rtl"] .table-filter-menu-search input,
  html[dir="rtl"] input[type="search"],
  html[dir="rtl"] .native-combobox .native-combobox-input {
    direction: rtl;
    text-align: start;
  }

  html body .data-table-shell .table-actions-menu button {
    position: relative;
    z-index: 1;
  }

  html body .modal-card.ledger-modal-card .data-table-shell tfoot .footer-stack b,
  html body #tblAllNameLedger tfoot .footer-stack b {
    white-space: nowrap;
  }

  html body .data-table-shell .table-wrap[data-chat-scroll="1"] {
    overscroll-behavior-y: contain;
    scroll-behavior: auto;
    overflow-anchor: auto;
  }

  html.sidebar-resizing body,
  html.sidebar-resizing body * {
    transition: none;
  }

  html body .sidebar,
  html body.side-collapsed .sidebar,
  html[dir="ltr"] body .sidebar,
  html[dir="ltr"] body.side-collapsed .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    inline-size: var(--side);
    width: var(--side);
    min-inline-size: var(--side);
    max-inline-size: min(var(--side), 100vw);
    overflow-x: hidden;
    flex: 0 0 var(--side);
  }

  html[dir="rtl"] body .sidebar,
  html[dir="rtl"] body.side-collapsed .sidebar {
    inset-inline-start: 0;
    inset-inline-end: auto;
    right: 0;
    left: auto;
  }

  html[dir="ltr"] body .sidebar,
  html[dir="ltr"] body.side-collapsed .sidebar {
    inset-inline-start: 0;
    inset-inline-end: auto;
    left: 0;
    right: auto;
  }

  html[dir="rtl"] body .main {
    inset-inline-start: var(--side);
    inset-inline-end: 0;
    right: var(--side);
    left: 0;
    margin: 0;
    max-width: none;
  }

  html[dir="ltr"] body .main {
    inset-inline-start: var(--side);
    inset-inline-end: 0;
    left: var(--side);
    right: 0;
    margin: 0;
    max-width: none;
  }

  html[dir="rtl"] body .topbar {
    inset-inline-start: var(--side);
    inset-inline-end: 0;
    right: var(--side);
    left: 0;
  }

  html[dir="ltr"] body .topbar {
    inset-inline-start: var(--side);
    inset-inline-end: 0;
    left: var(--side);
    right: 0;
  }

  html body .sidebar .nav button {
    min-inline-size: 0;
    overflow: hidden;
  }

  html body .sidebar .nav-label,
  html body .sidebar .uinfo,
  html body .sidebar .footer-name,
  html body .sidebar .sidebar-brand-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-inline-size: 100%;
    transition: none;
  }

  html.side-collapsed body .sidebar .nav-label,
  html.side-collapsed body .sidebar .uinfo,
  html.side-collapsed body .sidebar .footer-name,
  html.side-collapsed body .sidebar .sidebar-brand-text {
    display: block;
    inline-size: 0;
    max-inline-size: 0;
    opacity: 0;
    visibility: hidden;
    margin: 0;
    padding: 0;
    pointer-events: none;
  }

  html.side-collapsed body .sidebar .top-user,
  html.side-collapsed body .sidebar .sidebar-brand,
  html.side-collapsed body .sidebar .nav button,
  html.side-collapsed body .sidebar .side-actions {
    inline-size: 100%;
    justify-content: center;
  }

  html.side-collapsed body .sidebar .nav button {
    inline-size: 44px;
    min-inline-size: 44px;
    max-inline-size: 44px;
    padding-inline: 0;
  }

  @media (max-width: 900px) {
      html body .sidebar,
      html body.side-collapsed .sidebar,
      html[dir="ltr"] body .sidebar,
      html[dir="ltr"] body.side-collapsed .sidebar {
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        inset-inline-start: 0;
        inset-inline-end: 0;
        inline-size: 100%;
        width: 100%;
        min-inline-size: 0;
        max-inline-size: 100%;
      }

      html[dir="rtl"] body .main,
      html[dir="ltr"] body .main {
        left: auto;
        right: auto;
        inset-inline-start: auto;
        inset-inline-end: auto;
        margin-inline: 0;
        max-width: 100%;
      }

      html[dir="rtl"] body .topbar,
      html[dir="ltr"] body .topbar {
        left: 0;
        right: 0;
        inset-inline-start: 0;
        inset-inline-end: 0;
      }
  }

  html.side-collapsed:not(.mobile-bottom-nav-mode) body .sidebar .nav {
    align-items: center;
  }

  html.side-collapsed:not(.mobile-bottom-nav-mode) body .sidebar .nav button {
    display: grid;
    place-items: center;
    place-content: center;
    inline-size: 44px;
    block-size: 44px;
    width: 44px;
    height: 44px;
    min-inline-size: 44px;
    min-block-size: 44px;
    max-inline-size: 44px;
    padding: 0;
    gap: 0;
    text-align: center;
  }

  html.side-collapsed:not(.mobile-bottom-nav-mode) body .sidebar .nav button .nav-icon {
    grid-area: 1 / 1;
    inline-size: 1.35rem;
    block-size: 1.35rem;
    display: grid;
    place-items: center;
    margin: 0;
    transform: none;
  }

  html.side-collapsed:not(.mobile-bottom-nav-mode) body .sidebar .nav button .nav-icon svg {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    display: block;
  }

  html.side-collapsed:not(.mobile-bottom-nav-mode) body .sidebar .nav button .nav-label {
    position: absolute;
    inset: auto;
    inline-size: 1px;
    block-size: 1px;
    max-inline-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
  }

  html body .server-auto-table-shell .server-auto-wrap[data-chat-scroll="1"] {
    scroll-behavior: auto;
    overflow-anchor: none;
    overscroll-behavior-y: contain;
  }

  html body .server-auto-table-shell .server-auto-table tbody {
    overflow-anchor: none;
  }

  html body .nav-icon,
  html body .app-icon-inline,
  html body .btn-icon,
  html body .inline-icon,
  html body .theme-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    line-height: 0;
    color: currentColor;
    vertical-align: -0.18em;
  }

  html body .btn-icon,
  html body .inline-icon,
  html body .app-icon-inline,
  html body .theme-icon {
    inline-size: 1.25rem;
    block-size: 1.25rem;
  }

  html body .nav-icon {
    inline-size: 1.38rem;
    block-size: 1.38rem;
  }

  html body .nav-icon svg,
  html body .app-icon-inline svg,
  html body .btn-icon svg,
  html body .inline-icon svg,
  html body .theme-icon svg,
  html body .toast-icon svg {
    display: block;
    inline-size: 1.18rem;
    block-size: 1.18rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.95;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    shape-rendering: geometricPrecision;
    overflow: visible;
  }

  html body .nav-icon svg {
    inline-size: 1.26rem;
    block-size: 1.26rem;
  }

  html body .table-sort-mark,
  html body .server-sort-mark {
    display: inline-grid;
    place-items: center;
    min-inline-size: 1.25rem;
    block-size: 1.25rem;
    line-height: 0;
  }

  html body .table-sort-mark .inline-icon,
  html body .server-sort-mark .inline-icon {
    inline-size: 1rem;
    block-size: 1rem;
  }

  html body .table-filter-active-dot {
    inline-size: .48rem;
    block-size: .48rem;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 16%, transparent);
  }

  html body .toast-icon {
    inline-size: 1.9rem;
    block-size: 1.9rem;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--cgpt-hover-bg);
    color: currentColor;
    flex: 0 0 1.9rem;
  }

  html body .toast.success .toast-icon {
    color: var(--success);
  }

  html body .toast.error .toast-icon {
    color: var(--danger);
  }

  html body .toast.info .toast-icon {
    color: var(--accent);
  }

  html body .toast-close.icon-only {
    inline-size: 2rem;
    block-size: 2rem;
    min-block-size: 2rem;
  }

  html body .theme-icon {
    font-size: 0;
    transform: none;
  }

  html body .theme-icon.sun {
    color: #d97706;
  }

  html body .theme-icon.moon {
    color: #60a5fa;
  }

  html body button:hover .btn-icon,
  html body button:hover .inline-icon,
  html body button:hover .app-icon-inline,
  html body button:hover .theme-icon {
    opacity: 1;
  }

  html body button:disabled .btn-icon,
  html body button:disabled .inline-icon,
  html body button:disabled .app-icon-inline {
    opacity: .55;
  }

  html:not(.mobile-bottom-nav-mode) body .sidebar,
  html:not(.mobile-bottom-nav-mode) body.side-collapsed .sidebar,
  html[dir="ltr"]:not(.mobile-bottom-nav-mode) body .sidebar,
  html[dir="ltr"]:not(.mobile-bottom-nav-mode) body.side-collapsed .sidebar {
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  html:not(.mobile-bottom-nav-mode) body .sidebar .sidebar-brand,
  html:not(.mobile-bottom-nav-mode) body .sidebar .side-actions,
  html:not(.mobile-bottom-nav-mode) body .sidebar .footer-name {
    flex: 0 0 auto;
  }

  html:not(.mobile-bottom-nav-mode) body .sidebar .side-actions {
    inline-size: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .35rem;
    min-block-size: 2.45rem;
    overflow: hidden;
  }

  html.side-collapsed:not(.mobile-bottom-nav-mode) body .sidebar .side-actions {
    justify-content: center;
  }

  html:not(.mobile-bottom-nav-mode) body .sidebar .side-actions [hidden],
  html:not(.mobile-bottom-nav-mode) body .sidebar .sidebar-close-btn[hidden],
  html:not(.mobile-bottom-nav-mode) body .sidebar .sidebar-collapse-btn[hidden] {
    display: none;
  }

  @media (min-width: 901px) {
      html:not(.mobile-bottom-nav-mode) body .sidebar .sidebar-collapse-btn:not([hidden]) {
        display: inline-grid;
      }

      html:not(.mobile-bottom-nav-mode) body .sidebar .sidebar-close-btn {
        display: none;
      }
  }

  @media (max-width: 900px) {
      html.mobile-bottom-nav-mode body .sidebar .side-actions,
      html.mobile-bottom-nav-mode body .sidebar .sidebar-close-btn,
      html.mobile-bottom-nav-mode body .sidebar .sidebar-collapse-btn {
        display: none;
      }

      html:not(.mobile-bottom-nav-mode) body .sidebar .sidebar-close-btn:not([hidden]) {
        display: inline-grid;
      }

      html:not(.mobile-bottom-nav-mode) body .sidebar .sidebar-collapse-btn {
        display: none;
      }
  }

  html:not(.mobile-bottom-nav-mode) body .sidebar .nav,
  html:not(.mobile-bottom-nav-mode) body.side-collapsed .sidebar .nav {
    flex: 1 1 auto;
    min-block-size: 0;
    inline-size: 100%;
    max-inline-size: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
  }

  html:not(.mobile-bottom-nav-mode) body .sidebar .nav::-webkit-scrollbar {
    inline-size: 7px;
    block-size: 0;
  }

  html:not(.mobile-bottom-nav-mode) body .sidebar .nav::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: color-mix(in srgb, var(--muted) 38%, transparent);
  }

  html:not(.mobile-bottom-nav-mode) body .sidebar .nav::-webkit-scrollbar-track {
    background: transparent;
  }

  html:not(.mobile-bottom-nav-mode) body .sidebar .nav button {
    max-inline-size: 100%;
  }

  html.side-collapsed:not(.mobile-bottom-nav-mode) body .sidebar .nav {
    align-items: center;
    padding-inline: 0;
  }

  html.side-collapsed:not(.mobile-bottom-nav-mode) body .sidebar .nav button {
    inline-size: 44px;
    min-inline-size: 44px;
    max-inline-size: 44px;
    overflow: hidden;
  }

  html.mobile-bottom-nav-mode body .sidebar,
  html.mobile-bottom-nav-mode body.side-collapsed .sidebar {
    overflow: hidden;
  }

  html.mobile-bottom-nav-mode body .sidebar .nav,
  html.mobile-bottom-nav-mode body.side-collapsed .sidebar .nav {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  html.mobile-bottom-nav-mode body .sidebar .nav::-webkit-scrollbar {
    display: none;
  }

  @media (min-width: 901px) {
      html body .sidebar,
      html.side-collapsed body .sidebar {
        inline-size: var(--side);
        width: var(--side);
        padding: .82rem .72rem .72rem;
        display: flex;
        flex-direction: column;
        gap: .42rem;
        overflow: hidden;
        background: var(--surface-alt);
        border-inline-start: 1px solid var(--border);
        border-inline-end: 0;
      }

      html[dir="ltr"] body .sidebar,
      html[dir="ltr"].side-collapsed body .sidebar {
        border-inline-start: 0;
        border-inline-end: 1px solid var(--border);
      }

      html body .sidebar .sidebar-brand {
        flex: 0 0 auto;
        inline-size: 100%;
        min-block-size: 3.35rem;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: .72rem;
        padding: .42rem .42rem .50rem;
        margin: 0;
        overflow: hidden;
      }

      html body .sidebar .sidebar-brand-logo {
        inline-size: 3.05rem;
        block-size: 3.05rem;
        flex: 0 0 3.05rem;
        object-fit: contain;
        border-radius: .62rem;
      }

      html body .sidebar .sidebar-brand-text {
        min-inline-size: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: .16rem;
        text-align: start;
      }

      html body .sidebar .sidebar-brand-text b {
        max-inline-size: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 1rem;
        line-height: 1.25;
        font-weight: 760;
        letter-spacing: 0;
      }

      html body .sidebar .sidebar-brand-text small {
        max-inline-size: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: .82rem;
        line-height: 1.2;
        color: var(--muted);
      }

      html body .sidebar .side-actions {
        flex: 0 0 auto;
        inline-size: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 0 .14rem .20rem;
        margin: -.06rem 0 .10rem;
        gap: .25rem;
      }

      html body .sidebar .side-actions .sidebar-close-btn[hidden],
      html body .sidebar .side-actions .sidebar-collapse-btn[hidden] {
        display: none;
      }

      html body .sidebar .side-actions .sidebar-close-btn {
        display: none;
      }

      html body .sidebar .side-actions .sidebar-collapse-btn {
        display: inline-grid;
        place-items: center;
        inline-size: 2.36rem;
        block-size: 2.36rem;
        min-inline-size: 2.36rem;
        min-block-size: 2.36rem;
        border-radius: .72rem;
        color: var(--muted);
      }

      html body .sidebar .side-actions .sidebar-collapse-btn:hover:not(:disabled) {
        color: var(--text);
      }

      html body .sidebar .nav,
      html body .side-collapsed .sidebar .nav {
        flex: 1 1 auto;
        inline-size: 100%;
        min-block-size: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: .18rem;
        padding: .08rem .08rem .30rem;
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: color-mix(in srgb, var(--muted) 34%, transparent) transparent;
        overscroll-behavior: contain;
      }

      html body .sidebar .nav::-webkit-scrollbar,
      html body .side-collapsed .sidebar .nav::-webkit-scrollbar {
        inline-size: 6px;
        width: 6px;
        height: 6px;
      }

      html body .sidebar .nav::-webkit-scrollbar-thumb,
      html body .side-collapsed .sidebar .nav::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--muted) 30%, transparent);
        border-radius: 999px;
      }

      html body .sidebar .nav::-webkit-scrollbar-track,
      html body .side-collapsed .sidebar .nav::-webkit-scrollbar-track {
        background: transparent;
      }

      html body .sidebar .nav button,
      html body .side-collapsed .sidebar .nav button {
        position: relative;
        inline-size: 100%;
        width: 100%;
        min-block-size: 2.74rem;
        min-height: 2.74rem;
        block-size: auto;
        height: auto;
        padding: .54rem .68rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: .72rem;
        border-radius: .78rem;
        text-align: start;
        white-space: nowrap;
        overflow: hidden;
        color: color-mix(in srgb, var(--text) 88%, var(--muted) 12%);
        background: transparent;
        border-color: transparent;
        box-shadow: none;
      }

      html body .sidebar .nav button:hover:not(:disabled),
      html body .side-collapsed .sidebar .nav button:hover:not(:disabled) {
        background: color-mix(in srgb, var(--surface-hover) 82%, transparent);
        color: var(--text);
        box-shadow: none;
      }

      html body .sidebar .nav button.active,
      html body .side-collapsed .sidebar .nav button.active {
        background: color-mix(in srgb, var(--accent) 10%, var(--surface-hover) 90%);
        color: var(--text);
        border-color: color-mix(in srgb, var(--accent) 18%, transparent);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
        font-weight: 740;
      }

      html body .sidebar .nav button.active::before,
      html body .side-collapsed .sidebar .nav button.active::before {
        content: "";
        position: absolute;
        inset-block: .62rem;
        inset-inline-start: .18rem;
        inset-inline-end: auto;
        inline-size: 3px;
        width: 3px;
        block-size: auto;
        height: auto;
        border-radius: 999px;
        background: var(--accent);
        transform: none;
        opacity: 1;
      }

      html[dir="ltr"] body .sidebar .nav button.active::before,
      html[dir="ltr"].side-collapsed body .sidebar .nav button.active::before {
        inset-inline-start: auto;
        inset-inline-end: .18rem;
      }

      html body .sidebar .nav button .nav-icon,
      html body .side-collapsed .sidebar .nav button .nav-icon,
      html body .sidebar .side-actions .app-icon-inline,
      html body .topbar .sidebar-open-btn .app-icon-inline {
        inline-size: 1.36rem;
        block-size: 1.36rem;
        flex: 0 0 1.36rem;
        display: inline-grid;
        place-items: center;
        margin: 0;
        color: color-mix(in srgb, var(--text) 76%, var(--muted) 24%);
        transform: none;
        opacity: 1;
      }

      html body .sidebar .nav button .nav-icon svg,
      html body .side-collapsed .sidebar .nav button .nav-icon svg,
      html body .sidebar .side-actions .app-icon-inline svg,
      html body .topbar .sidebar-open-btn .app-icon-inline svg {
        inline-size: 1.30rem;
        block-size: 1.30rem;
        stroke-width: 2.18;
        vector-effect: non-scaling-stroke;
      }

      html body .sidebar .nav button.active .nav-icon,
      html body .side-collapsed .sidebar .nav button.active .nav-icon {
        color: var(--accent);
      }

      html body .sidebar .nav button:hover .nav-icon,
      html body .side-collapsed .sidebar .nav button:hover .nav-icon,
      html body .sidebar .side-actions button:hover .app-icon-inline,
      html body .topbar .sidebar-open-btn:hover .app-icon-inline {
        color: var(--text);
        transform: none;
      }

      html body .sidebar .nav button .nav-label,
      html body .side-collapsed .sidebar .nav button .nav-label {
        display: block;
        flex: 1 1 auto;
        min-inline-size: 0;
        max-inline-size: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: start;
        line-height: 1.28;
        font-size: .95rem;
        font-weight: 680;
        letter-spacing: 0;
      }

      html.side-collapsed body .sidebar {
        padding-inline: .62rem;
      }

      html.side-collapsed body .sidebar .sidebar-brand {
        justify-content: center;
        padding: .36rem 0 .18rem;
      }

      html.side-collapsed body .sidebar .sidebar-brand-logo {
        inline-size: 2.85rem;
        block-size: 2.85rem;
        flex-basis: 2.85rem;
      }

      html.side-collapsed body .sidebar .sidebar-brand-text,
      html.side-collapsed body .sidebar .footer-name {
        display: none;
      }

      html.side-collapsed body .sidebar .side-actions {
        justify-content: center;
        padding: .08rem 0 .28rem;
        margin: 0;
      }

      html.side-collapsed body .sidebar .nav {
        align-items: center;
        padding-inline: 0;
        gap: .34rem;
      }

      html.side-collapsed body .sidebar .nav button {
        inline-size: 2.86rem;
        width: 2.86rem;
        min-inline-size: 2.86rem;
        max-inline-size: 2.86rem;
        block-size: 2.86rem;
        height: 2.86rem;
        min-block-size: 2.86rem;
        min-height: 2.86rem;
        padding: 0;
        justify-content: center;
        border-radius: .82rem;
      }

      html.side-collapsed body .sidebar .nav button .nav-label {
        display: none;
      }

      html.side-collapsed body .sidebar .nav button.active::before {
        inset-inline-start: .10rem;
        inset-block: .72rem;
        inline-size: 3px;
      }
  }

  @media (max-width: 900px) {
      html body .sidebar .nav button .nav-icon svg,
      html body .side-collapsed .sidebar .nav button .nav-icon svg,
      html body .topbar .sidebar-open-btn .app-icon-inline svg {
        stroke-width: 2.15;
        vector-effect: non-scaling-stroke;
      }

      html body .topbar .sidebar-open-btn .app-icon-inline {
        inline-size: 1.35rem;
        block-size: 1.35rem;
      }
  }

  @media (min-width: 901px) {
      html.side-collapsed:not(.mobile-bottom-nav-mode) body .sidebar {
        padding-inline: 0;
        align-items: center;
      }

      html.side-collapsed:not(.mobile-bottom-nav-mode) body .sidebar .sidebar-brand,
      html.side-collapsed:not(.mobile-bottom-nav-mode) body .sidebar .side-actions,
      html.side-collapsed:not(.mobile-bottom-nav-mode) body .sidebar .nav,
      html.side-collapsed:not(.mobile-bottom-nav-mode) body .sidebar .footer-name {
        inline-size: 100%;
        width: 100%;
      }

      html.side-collapsed:not(.mobile-bottom-nav-mode) body .sidebar .sidebar-brand,
      html.side-collapsed:not(.mobile-bottom-nav-mode) body .sidebar .side-actions {
        display: grid;
        place-items: center;
        justify-content: center;
        padding-inline: 0;
      }

      html.side-collapsed:not(.mobile-bottom-nav-mode) body .sidebar .nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding-inline: 0;
        gap: .36rem;
        overflow-x: hidden;
      }

      html.side-collapsed:not(.mobile-bottom-nav-mode) body .sidebar .nav button {
        position: relative;
        display: grid;
        place-items: center;
        place-content: center;
        inline-size: 3.28rem;
        width: 3.28rem;
        min-inline-size: 3.28rem;
        max-inline-size: 3.28rem;
        block-size: 3.02rem;
        height: 3.02rem;
        min-block-size: 3.02rem;
        min-height: 3.02rem;
        padding: 0;
        margin-inline: auto;
        border-radius: .92rem;
        gap: 0;
        transform: none;
      }

      html.side-collapsed:not(.mobile-bottom-nav-mode) body .sidebar .nav button .nav-icon {
        position: absolute;
        inset: 0;
        margin: auto;
        inline-size: 1.42rem;
        block-size: 1.42rem;
        display: grid;
        place-items: center;
        grid-area: unset;
        color: color-mix(in srgb, var(--text) 82%, var(--muted) 18%);
      }

      html.side-collapsed:not(.mobile-bottom-nav-mode) body .sidebar .nav button .nav-icon svg {
        inline-size: 1.30rem;
        block-size: 1.30rem;
        stroke-width: 2.05;
        stroke-linecap: round;
        stroke-linejoin: round;
        vector-effect: non-scaling-stroke;
      }

      html.side-collapsed:not(.mobile-bottom-nav-mode) body .sidebar .nav button.active::before {
        inset-block: .68rem;
        inset-inline-start: .22rem;
        inset-inline-end: auto;
        inline-size: 3px;
        border-radius: 999px;
      }

      html[dir="ltr"].side-collapsed:not(.mobile-bottom-nav-mode) body .sidebar .nav button.active::before {
        inset-inline-start: auto;
        inset-inline-end: .22rem;
      }

      html.side-collapsed:not(.mobile-bottom-nav-mode) body .sidebar .side-actions .sidebar-collapse-btn,
      html.side-collapsed:not(.mobile-bottom-nav-mode) body .sidebar .side-actions .sidebar-close-btn {
        inline-size: 2.70rem;
        block-size: 2.70rem;
        min-inline-size: 2.70rem;
        min-block-size: 2.70rem;
        display: grid;
        place-items: center;
        margin-inline: auto;
      }

      html.side-collapsed:not(.mobile-bottom-nav-mode) body .sidebar .side-actions .app-icon-inline,
      html.side-collapsed:not(.mobile-bottom-nav-mode) body .topbar .sidebar-open-btn .app-icon-inline {
        inline-size: 1.42rem;
        block-size: 1.42rem;
        display: grid;
        place-items: center;
      }

      html.side-collapsed:not(.mobile-bottom-nav-mode) body .sidebar .side-actions .app-icon-inline svg,
      html.side-collapsed:not(.mobile-bottom-nav-mode) body .topbar .sidebar-open-btn .app-icon-inline svg {
        inline-size: 1.32rem;
        block-size: 1.32rem;
        stroke-width: 2.05;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
  }

  html.side-collapsed:not(.mobile-bottom-nav-mode) body .sidebar .sidebar-close-btn,
  html.side-collapsed:not(.mobile-bottom-nav-mode) body .sidebar .sidebar-close-btn:not([hidden]) {
    display: none;
    visibility: hidden;
    pointer-events: none;
  }

  html.side-collapsed:not(.mobile-bottom-nav-mode) body .sidebar .side-actions {
    grid-template-columns: 1fr;
  }

  html[dir="rtl"]:not(.side-collapsed):not(.mobile-bottom-nav-mode) body .sidebar .sidebar-collapse-btn .app-icon-inline,
  html[dir="rtl"].side-collapsed:not(.mobile-bottom-nav-mode) body .sidebar .sidebar-collapse-btn .app-icon-inline,
  html[dir="ltr"]:not(.side-collapsed):not(.mobile-bottom-nav-mode) body .sidebar .sidebar-collapse-btn .app-icon-inline,
  html[dir="ltr"].side-collapsed:not(.mobile-bottom-nav-mode) body .sidebar .sidebar-collapse-btn .app-icon-inline {
    transform: none;
  }

  @media (min-width: 901px) {
      html.side-collapsed:not(.mobile-bottom-nav-mode) body .sidebar {
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr) auto;
        align-content: start;
        justify-content: center;
        justify-items: center;
        row-gap: .26rem;
        padding-block: .70rem .56rem;
        padding-inline: 0;
        overflow: hidden;
      }

      html.side-collapsed:not(.mobile-bottom-nav-mode) body .sidebar .sidebar-brand {
        grid-row: 1;
        min-block-size: 0;
        block-size: auto;
        padding: .20rem 0 .10rem;
        margin: 0;
      }

      html.side-collapsed:not(.mobile-bottom-nav-mode) body .sidebar .sidebar-brand-logo {
        inline-size: 3.02rem;
        block-size: 3.02rem;
        flex-basis: 3.02rem;
      }

      html.side-collapsed:not(.mobile-bottom-nav-mode) body .sidebar .side-actions {
        grid-row: 2;
        block-size: 2.44rem;
        min-block-size: 2.44rem;
        padding: 0;
        margin: 0;
        display: grid;
        place-items: center;
        justify-content: center;
      }

      html.side-collapsed:not(.mobile-bottom-nav-mode) body .sidebar .side-actions .sidebar-collapse-btn {
        inline-size: 2.38rem;
        block-size: 2.38rem;
        min-inline-size: 2.38rem;
        min-block-size: 2.38rem;
        margin: 0 auto;
      }

      html.side-collapsed:not(.mobile-bottom-nav-mode) body .sidebar .nav {
        grid-row: 3;
        align-self: stretch;
        justify-self: stretch;
        flex: initial;
        inline-size: 100%;
        block-size: auto;
        min-block-size: 0;
        margin-block-start: .18rem;
        padding: .04rem 0 .35rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: .34rem;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-gutter: stable both-edges;
      }

      html.side-collapsed:not(.mobile-bottom-nav-mode) body .sidebar .footer-name {
        grid-row: 4;
        display: none;
      }
  }

  html.theme-switching body,
  html.theme-switching body *:not(.theme-smooth-overlay),
  html.theme-switching body *::before,
  html.theme-switching body *::after {
    transition: none;
    animation: none;
    scroll-behavior: auto;
  }

  .theme-smooth-overlay {
    transition: opacity 240ms cubic-bezier(.22, .90, .18, 1);
  }

  @media (prefers-reduced-motion: reduce) {
      .theme-smooth-overlay {
        transition: none;
      }
  }

  html[dir] .table-filter-box input[type="search"][dir="auto"],
  html[dir] .table-filter-menu-search input[type="search"][dir="auto"],
  html[dir] .server-auto-search[dir="auto"],
  html[dir] input.native-search-input[type="search"][dir="auto"] {
    direction: revert;
    unicode-bidi: plaintext;
    text-align: start;
  }

  .phone-flexible-input:invalid {
    box-shadow: none;
  }

  @media (max-width: 720px) {
      html body.modal-open,
      html.modal-open body {
        overflow: hidden;
      }

      html body .modal.open,
      html body .quick-modal.open {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        place-items: normal;
        inset: 0;
        block-size: 100dvh;
        min-block-size: 100dvh;
        max-block-size: 100dvh;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        touch-action: pan-y;
        padding-block: max(.5rem, env(safe-area-inset-top, 0px)) max(.5rem, calc(var(--app-keyboard-inset, 0px) + env(safe-area-inset-bottom, 0px) + .5rem));
        padding-inline: .5rem;
        scroll-behavior: auto;
        scroll-padding-block: max(.75rem, env(safe-area-inset-top, 0px)) max(5rem, calc(var(--app-keyboard-inset, 0px) + env(safe-area-inset-bottom, 0px) + 4.5rem));
      }

      html body .modal-card,
      html body .quick-modal-card {
        inline-size: min(calc(100vw - 1rem), var(--modal-width, 40rem));
        max-inline-size: calc(100vw - 1rem);
        block-size: auto;
        max-block-size: none;
        max-height: none;
        min-block-size: 0;
        overflow: visible;
        display: flex;
        flex-direction: column;
        flex: 0 0 auto;
        margin-inline: auto;
        margin-block: auto;
        transform: none;
        will-change: auto;
      }

      html body .modal.open:has(.modal-card),
      html body .quick-modal.open:has(.quick-modal-card) {
        scroll-padding-block: max(.75rem, env(safe-area-inset-top, 0px)) max(5rem, calc(var(--app-keyboard-inset, 0px) + env(safe-area-inset-bottom, 0px) + 4.5rem));
      }

      html body .modal-head,
      html body .modal-footer {
        position: static;
        inset: auto;
        top: auto;
        bottom: auto;
        z-index: auto;
        flex: 0 0 auto;
      }

      html body .modal-body,
      html body .quick-modal-card .modal-body {
        flex: 0 0 auto;
        min-block-size: 0;
        max-block-size: none;
        max-height: none;
        overflow: visible;
        overscroll-behavior: auto;
        touch-action: auto;
        padding-block-end: max(1rem, env(safe-area-inset-bottom, 0px));
      }
  }
}


html body .data-table-shell .table-wrap.table-compact,
html body .data-table-shell .table-wrap.table-medium,
html body .data-table-shell .table-wrap.table-wide,
html body .data-table-shell .table-wrap.server-auto-wrap {
  height: auto;
  max-height: var(--native-table-max, min(72dvh, 44rem));
  overflow: auto;
}

html body .data-table-shell.table-is-empty .table-wrap {
  max-height: var(--native-table-max, 12rem);
}

@media (max-width: 900px) {
  html body .data-table-shell .table-wrap.table-compact,
  html body .data-table-shell .table-wrap.table-medium,
  html body .data-table-shell .table-wrap.table-wide,
  html body .data-table-shell .table-wrap.server-auto-wrap {
    max-height: var(--native-table-max, min(66dvh, 32rem));
  }
}

html body .main.native-single-table-main {
  overflow-y: hidden;
}

html body #content.native-single-table-page {
  overflow: hidden;
  min-block-size: 0;
}

html body #content.native-single-table-page > .card.table-native-card,
html body #content.native-single-table-page > .all-names-table-card,
html body #content.native-single-table-page > .data-table-shell {
  min-block-size: 0;
  max-block-size: 100%;
  margin-block-end: 0;
}

html body #content.native-single-table-page .data-table-shell {
  min-block-size: 0;
}

html body #content.native-single-table-page .data-table-shell .table-wrap.table-compact,
html body #content.native-single-table-page .data-table-shell .table-wrap.table-medium,
html body #content.native-single-table-page .data-table-shell .table-wrap.table-wide,
html body #content.native-single-table-page .data-table-shell .table-wrap.server-auto-wrap {
  block-size: var(--native-table-max, min(72dvh, 44rem));
  max-block-size: var(--native-table-max, min(72dvh, 44rem));
  overflow: auto;
}

html body #content.native-stacked-table-page .data-table-shell .table-wrap.table-compact,
html body #content.native-stacked-table-page .data-table-shell .table-wrap.table-medium,
html body #content.native-stacked-table-page .data-table-shell .table-wrap.table-wide,
html body #content.native-stacked-table-page .data-table-shell .table-wrap.server-auto-wrap {
  max-block-size: var(--native-table-max, min(70dvh, 36rem));
  overflow: auto;
}

/* Native ledger detail modal: full comfortable width, no compact jump after async content. */
html body .modal-card.ledger-modal-card {
  --modal-width: min(78rem, calc(100vw - 1.25rem));
  inline-size: min(78rem, calc(100vw - 1.25rem));
  max-inline-size: calc(100vw - 1.25rem);
}
html body .modal-card.ledger-modal-card .modal-body {
  padding: .9rem;
}
html body .ledger-detail-mount {
  display: grid;
  gap: .75rem;
  min-inline-size: 0;
}
html body .ledger-quick-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .85rem .95rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--surface-alt) 84%, var(--surface));
}
html body .ledger-quick-summary > div {
  display: grid;
  gap: .18rem;
  min-inline-size: 0;
}
html body .ledger-quick-summary small {
  color: var(--muted);
  font-weight: 650;
}
html body .ledger-soft-loading,
html body .ledger-soft-error {
  display: flex;
  align-items: center;
  gap: .7rem;
  justify-content: center;
  text-align: center;
}
html body .ledger-soft-error {
  flex-direction: column;
}
html body .ledger-closing-line {
  margin: .55rem .15rem 0;
  text-align: end;
}
@media (max-width: 720px) {
  html body .modal-card.ledger-modal-card {
    inline-size: calc(100vw - .5rem);
    max-inline-size: calc(100vw - .5rem);
    max-block-size: calc(100dvh - .5rem);
  }
  html body .modal-card.ledger-modal-card .modal-body {
    padding: .55rem;
  }
  html body .ledger-quick-summary {
    border-radius: .9rem;
    padding: .72rem .8rem;
  }
}