/* src/app/shared/styles/app-theme-system.css */
:root {
  --app-font-family-sans:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    roboto,
    "Helvetica Neue",
    helvetica,
    arial,
    sans-serif;
  --app-theme-font-sans: var(--app-font-family-sans);
  --app-grid-header-font-family: var(--app-theme-font-sans);
  --app-grid-header-cell-height: 32px;
  --app-grid-header-cell-padding-inline: 8px;
  --app-grid-header-cell-font-size: 13px;
  --app-grid-header-cell-font-weight: 700;
  --app-grid-header-text-height: 16px;
  --app-grid-header-text-size: 12px;
  --app-grid-header-text-font-weight: 500;
  --app-grid-header-text-line-height: 1.3333333333;
  --app-grid-header-icon-gap: 4px;
  --app-grid-header-icon-cluster-gap: 2px;
  --app-grid-header-icon-button-size: 16px;
  --app-grid-header-icon-size: 12px;
  --app-grid-group-card-header-height: 40px;
  --app-grid-group-card-row-height: 31px;
  --app-grid-group-card-gap: 12px;
  --app-grid-selection-column-width: 44px;
  --app-grid-row-actions-column-width: 120px;
  --app-grid-checkbox-size: 14px;
  --app-grid-checkbox-radius: 4px;
  --app-grid-pill-height: 21px;
  --app-grid-pill-radius: 6px;
  --app-grid-pill-padding-inline: 7px;
  --app-grid-pill-gap: 4px;
  --app-grid-pill-font-size: 10px;
  --app-grid-pill-font-weight: 600;
  --app-grid-pill-dot-size: 7px;
  --app-grid-pill-dot-ring: 1.5px;
  --app-pill-height: var(--app-grid-pill-height);
  --app-pill-radius: var(--app-grid-pill-radius);
  --app-pill-padding-inline: var(--app-grid-pill-padding-inline);
  --app-pill-gap: var(--app-grid-pill-gap);
  --app-pill-font-size: var(--app-grid-pill-font-size);
  --app-pill-font-weight: var(--app-grid-pill-font-weight);
  --app-pill-dot-size: var(--app-grid-pill-dot-size);
  --app-pill-dot-ring: var(--app-grid-pill-dot-ring);
  --app-color-grid-checkbox-bg: rgb(17 17 17);
  --app-color-grid-checkbox-bg-hover: rgb(17 17 17);
  --app-color-grid-checkbox-border: rgb(110 110 110);
  --app-color-grid-checkbox-border-strong: rgb(110 110 110);
  --app-color-grid-checkbox-check: rgb(255 255 255);
  --app-color-grid-checkbox-checked-bg: var(--app-color-primary);
  --app-color-grid-header-bg: rgb(25 25 25);
  --app-color-grid-group-header-bg: var(--app-color-grid-header-bg);
  --app-color-grid-row-hover: var(--app-color-grid-header-bg);
  --app-color-grid-header-cell-fg: rgb(238 238 238);
  --app-color-grid-header-text-fg: rgb(123 123 123);
  --app-grid-group-header-accent-rgb: var(--primary);
  --app-grid-group-footer-accent-rgb: var(--warning);
  --app-grid-grand-total-accent-rgb: var(--success);
  --app-color-grid-surface: color-mix(in oklab, rgb(var(--bg0, 17 18 20)) 96%, black 4%);
  --app-color-grid-surface-raised: color-mix( in oklab, rgb(var(--bg1, 23 25 28)) 92%, rgb(var(--fg, 255 255 255)) 8% );
  --app-color-grid-surface-footer: var(--app-color-grid-surface);
  --app-color-grid-outline: color-mix( in oklab, rgb(var(--border-strong, var(--border))) 34%, transparent );
  --app-color-grid-line: color-mix( in oklab, rgb(var(--border-strong, var(--border))) 56%, transparent );
  --app-color-grid-line-soft: color-mix( in oklab, rgb(var(--border-strong, var(--border))) 38%, transparent );
  --app-color-grid-line-faint: color-mix( in oklab, rgb(var(--border-strong, var(--border))) 24%, transparent );
  --app-tree-connector-width: 1px;
  --app-tree-connector-color: color-mix( in oklab, rgb(var(--fg, 255 255 255)) 42%, transparent );
  --app-tree-connector-hover-color: var(--app-tree-connector-color);
  --app-tree-connector-selected-color: var(--app-tree-connector-color);
  --app-tree-connector-hitbox-width: 30px;
  --app-tree-connector-elbow-height: 8px;
  --app-tree-toggle-bg: rgb(var(--bg0, 12 13 14));
  --app-tree-toggle-hover-bg: rgb(var(--bg1, 23 25 28));
  --app-tree-card-fill: transparent;
  --app-tree-card-outline: transparent;
  --app-tree-card-hover-fill: transparent;
  --app-tree-card-hover-outline: transparent;
  --app-tree-card-selected-fill-start: color-mix( in oklab, rgb(var(--primary, 132 199 24)) 17%, transparent );
  --app-tree-card-selected-fill-mid: color-mix( in oklab, rgb(var(--primary, 132 199 24)) 8%, transparent );
  --app-tree-card-selected-fill-tail: color-mix( in oklab, rgb(var(--fg, 255 255 255)) 2%, transparent );
  --app-tree-card-selected-outline: color-mix( in oklab, rgb(var(--primary, 132 199 24)) 38%, transparent );
  --app-tree-card-hover-rail: color-mix( in oklab, rgb(var(--primary, 132 199 24)) 46%, transparent );
  --app-tree-root-card-outline: var(--app-color-grid-line-soft);
  --app-tree-root-card-fill-top: var(--app-color-grid-header-bg);
  --app-tree-root-card-fill-bottom: var(--app-color-grid-header-bg);
  --app-tree-root-card-hover-fill-top: var(--app-tree-root-card-fill-top);
  --app-tree-root-card-hover-fill-bottom: var(--app-tree-root-card-fill-bottom);
  --app-tree-root-card-selected-fill-top: var(--app-tree-root-card-fill-top);
  --app-tree-root-card-selected-fill-mid: var(--app-tree-root-card-fill-top);
  --app-tree-root-card-selected-fill-tail: var(--app-tree-root-card-fill-bottom);
  --app-tree-root-card-hover-ring: none;
  --app-tree-root-card-selected-ring: inset 0 0 0 1px var(--app-tree-root-card-outline);
  --app-tree-branch-card-outline: var(--app-color-grid-line-soft);
  --app-tree-branch-card-fill-top: color-mix( in oklab, var(--app-color-grid-header-bg) 88%, transparent );
  --app-tree-branch-card-fill-bottom: color-mix( in oklab, var(--app-color-grid-header-bg) 82%, transparent );
  --app-tree-branch-card-inner-line: color-mix( in oklab, var(--app-color-grid-line-faint) 72%, transparent );
  --app-tree-branch-card-inner-outline: color-mix( in oklab, var(--app-color-grid-line-faint) 56%, transparent );
  --app-tree-branch-card-hover-outline: var(--app-color-grid-line);
  --app-tree-branch-card-hover-fill-top: var(--app-tree-branch-card-fill-top);
  --app-tree-branch-card-hover-fill-bottom: var(--app-tree-branch-card-fill-bottom);
  --app-tree-branch-card-selected-outline: color-mix( in oklab, rgb(var(--primary, 132 199 24)) 44%, transparent );
  --app-tree-branch-card-selected-fill-start: color-mix( in oklab, rgb(var(--primary, 132 199 24)) 17%, transparent );
  --app-tree-branch-card-selected-fill-end: color-mix( in oklab, rgb(var(--fg, 255 255 255)) 4%, transparent );
  --app-tree-branch-card-selected-ring: inset 0 0 0 1px color-mix(in oklab, rgb(var(--primary, 132 199 24)) 22%, transparent);
  --app-tree-nested-branch-outline: rgb(var(--fg, 255 255 255) / 0.12);
  --app-tree-nested-branch-fill: rgb(var(--fg, 255 255 255) / 0.035);
  --app-tree-nested-branch-hover-outline: var(--app-color-grid-line-soft);
  --app-tree-nested-branch-selected-outline: color-mix( in oklab, rgb(var(--primary, 132 199 24)) 34%, var(--app-color-grid-line-soft) );
  --app-tree-nested-branch-selected-fill: color-mix( in oklab, rgb(var(--primary, 132 199 24)) 5%, var(--app-tree-nested-branch-fill) );
  --app-tree-nested-branch-open-fill: rgb(var(--primary, 132 199 24) / 0.045);
  --app-tree-nested-branch-open-outline: rgb(var(--primary, 132 199 24) / 0.28);
  --app-tree-label-text: color-mix(in oklab, rgb(var(--fg, 255 255 255)) 92%, transparent);
  --app-tree-root-label-font-size: 14px;
  --app-tree-root-label-font-weight: 820;
  --app-tree-level-1-label-font-size: 12.15px;
  --app-tree-level-1-label-font-weight: 640;
  --app-tree-level-1-branch-label-font-size: 12.85px;
  --app-tree-level-1-branch-label-font-weight: 780;
  --app-tree-level-2-label-font-size: 11.55px;
  --app-tree-level-2-label-font-weight: 590;
  --app-tree-level-2-branch-label-font-size: 12.1px;
  --app-tree-level-2-branch-label-font-weight: 740;
  --app-tree-level-deep-label-font-size: 11px;
  --app-tree-level-deep-label-font-weight: 560;
  --app-tree-root-label-text: rgb(var(--fg, 255 255 255));
  --app-tree-branch-label-text: color-mix( in oklab, rgb(var(--fg, 255 255 255)) 88%, transparent );
  --app-tree-level-1-label-text: color-mix( in oklab, rgb(var(--fg, 255 255 255)) 76%, transparent );
  --app-tree-level-1-branch-label-text: color-mix( in oklab, rgb(var(--fg, 255 255 255)) 88%, transparent );
  --app-tree-level-2-label-text: color-mix( in oklab, rgb(var(--fg, 255 255 255)) 68%, transparent );
  --app-tree-level-2-branch-label-text: color-mix( in oklab, rgb(var(--fg, 255 255 255)) 82%, transparent );
  --app-tree-level-deep-label-text: color-mix( in oklab, rgb(var(--fg, 255 255 255)) 60%, transparent );
  --app-tree-active-label-text: rgb(var(--primary, 132 199 24));
  --app-tree-leaf-label-text: color-mix( in oklab, rgb(var(--fg, 255 255 255)) 78%, transparent );
  --app-tree-count-bg: color-mix(in oklab, rgb(var(--fg, 255 255 255)) 5.5%, transparent);
  --app-tree-count-text: color-mix(in oklab, rgb(var(--fg, 255 255 255)) 80%, transparent);
  --app-tree-count-root-bg: color-mix(in oklab, rgb(var(--bg1, 23 25 28)) 78%, transparent);
  --app-tree-branch-count-bg: color-mix( in oklab, rgb(var(--fg, 255 255 255)) 5.5%, transparent );
  --app-tree-branch-count-text: color-mix( in oklab, rgb(var(--fg, 255 255 255)) 82%, transparent );
  --app-tree-record-count-bg: color-mix( in oklab, rgb(var(--primary, 132 199 24)) 10%, transparent );
  --app-tree-record-count-text: color-mix( in oklab, rgb(var(--primary, 132 199 24)) 88%, transparent );
  --app-tree-price-record-count-bg: color-mix( in oklab, rgb(var(--info, 99 179 237)) 10%, transparent );
  --app-tree-price-record-count-text: color-mix( in oklab, rgb(var(--info, 99 179 237)) 88%, rgb(var(--fg, 255 255 255)) 12% );
  --app-tree-count-selected-bg: color-mix( in oklab, rgb(var(--primary, 132 199 24)) 20%, transparent );
  --app-tree-tag-row-extra: 13px;
  --app-tree-tag-list-gap: 7px;
  --app-tree-tag-height: 14px;
  --app-tree-tag-padding-inline: 0;
  --app-tree-tag-gap: 1px;
  --app-tree-tag-radius: 0;
  --app-tree-tag-max-width: 92px;
  --app-tree-tag-overflow-max-width: 94px;
  --app-tree-tag-font-size: 9.8px;
  --app-tree-tag-font-weight: 740;
  --app-tree-tag-bg: transparent;
  --app-tree-tag-border: transparent;
  --app-tree-tag-text: color-mix( in oklab, var(--app-color-warning-text, rgb(var(--warning, 245 158 11))) 88%, rgb(var(--fg, 255 255 255)) 12% );
  --app-tree-tag-inherited-bg: color-mix( in oklab, rgb(var(--fg, 255 255 255)) 4%, transparent );
  --app-tree-tag-inherited-border: color-mix( in oklab, rgb(var(--fg, 255 255 255)) 0%, transparent );
  --app-tree-tag-inherited-text: color-mix( in oklab, rgb(var(--fg, 255 255 255)) 62%, transparent );
  --app-tree-tag-inherited-opacity: 0.72;
  --app-tree-search-match-text: rgb(var(--fg, 255 255 255));
  --app-tree-search-highlight-bg: color-mix( in oklab, rgb(var(--primary, 132 199 24)) 20%, transparent );
  --app-tree-search-highlight-text: rgb(var(--primary, 132 199 24));
  --app-tree-search-bg: rgb(var(--fg, 255 255 255) / 0.03);
  --app-tree-search-bg-focus: rgb(var(--fg, 255 255 255) / 0.04);
  --app-tree-search-text: rgb(var(--fg, 255 255 255) / 0.88);
  --app-tree-search-muted-text: rgb(var(--fg, 255 255 255) / 0.62);
  --app-tree-search-icon-text: rgb(var(--fg, 255 255 255) / 0.86);
  --app-tree-toolbar-action-text: rgb(var(--fg, 255 255 255) / 0.56);
  --app-tree-toolbar-action-hover-text: rgb(var(--fg, 255 255 255) / 0.88);
  --app-tree-toolbar-action-disabled-text: rgb(var(--fg, 255 255 255) / 0.22);
  --app-tree-toolbar-divider: rgb(var(--fg, 255 255 255) / 0.1);
  --app-tree-header-text: rgb(var(--fg, 255 255 255) / 0.96);
  --app-tree-header-muted-text: rgb(var(--fg, 255 255 255) / 0.6);
  --app-tree-header-count-bg: rgb(var(--fg, 255 255 255) / 0.055);
  --app-tree-header-count-text: rgb(var(--fg, 255 255 255) / 0.84);
  --app-tree-more-text: color-mix(in oklab, rgb(var(--fg, 255 255 255)) 55%, transparent);
  --app-tree-more-hover-fill: color-mix( in oklab, rgb(var(--fg, 255 255 255)) 8%, transparent );
  --app-tree-more-hover-text: rgb(var(--primary, 132 199 24));
  --app-tree-context-bg: rgb(var(--bg0) / 0.98);
  --app-tree-context-border: rgb(var(--fg) / 0.1);
  --app-tree-context-divider: rgb(var(--fg) / 0.08);
  --app-tree-context-hover-bg: rgb(var(--fg) / 0.045);
  --app-tree-context-muted-text: rgb(var(--fg) / 0.48);
  --app-tree-context-action-text: rgb(var(--fg) / 0.86);
  --app-tree-context-action-hover-text: rgb(var(--fg));
  --app-tree-context-focus-outline: rgb(var(--primary, 132 199 24) / 0.36);
  --app-tree-context-danger-text: rgb(254 202 202);
  --app-tree-context-danger-bg: rgb(248 113 113 / 0.1);
  --app-tree-context-input-bg: rgb(var(--fg) / 0.045);
  --app-tree-context-input-border: rgb(var(--fg) / 0.1);
  --app-tree-root-bg: color-mix( in oklab, rgb(var(--primary, 132 199 24)) 8%, transparent );
  --app-tree-root-selected-bg-end: color-mix( in oklab, rgb(var(--surface, 23 25 28)) 82%, transparent );
  --app-tree-editor-bg: color-mix(in oklab, rgb(var(--surface, 23 25 28)) 90%, transparent);
  --app-color-grid-row-selected: color-mix( in oklab, rgb(var(--primary, 132 199 24)) 10%, transparent );
  --app-color-grid-body-text: #d5d6d7;
  --app-color-grid-body-text-soft: var(--app-color-text-soft, rgb(var(--fg) / 0.74));
  --app-color-grid-link: #d5d6d7;
  --app-color-grid-link-hover: #d5d6d7;
  --app-color-grid-pill-border: color-mix( in oklab, rgb(var(--border-strong, var(--border))) 26%, transparent );
  --app-color-grid-pill-surface: color-mix( in oklab, var(--app-color-grid-surface-raised) 93%, rgb(var(--fg, 255 255 255)) 7% );
  --app-color-grid-pill-text: color-mix(in oklab, rgb(var(--fg, 255 255 255)) 84%, transparent);
  --app-color-grid-pill-custom-bg: color-mix( in oklab, var(--app-color-grid-pill-surface) 88%, var(--custom) 12% );
  --app-color-grid-pill-custom-border: color-mix( in oklab, var(--app-color-grid-pill-border) 78%, var(--custom) 22% );
  --app-color-grid-pill-tone-border: color-mix( in oklab, var(--app-color-grid-pill-border) 80%, currentColor 20% );
  --app-color-grid-pill-tone-bg: color-mix( in oklab, var(--app-color-grid-pill-surface) 90%, currentColor 10% );
  --app-color-pill-border: var(--app-color-grid-pill-border);
  --app-color-pill-surface: var(--app-color-grid-pill-surface);
  --app-color-pill-text: var(--app-color-grid-pill-text);
  --app-color-pill-custom-bg: var(--app-color-grid-pill-custom-bg);
  --app-color-pill-custom-border: var(--app-color-grid-pill-custom-border);
  --app-color-pill-tone-border: var(--app-color-grid-pill-tone-border);
  --app-color-pill-tone-bg: var(--app-color-grid-pill-tone-bg);
  --app-color-grid-muted-label: color-mix(in oklab, rgb(var(--fg, 255 255 255)) 38%, transparent);
  --app-color-grid-muted-value: color-mix(in oklab, rgb(var(--fg, 255 255 255)) 70%, transparent);
  --app-color-grid-muted-placeholder: color-mix( in oklab, rgb(var(--fg, 255 255 255)) 46%, transparent );
  --app-color-grid-icon: color-mix(in oklab, var(--app-color-grid-body-text) 38%, transparent);
  --app-color-grid-icon-active: color-mix( in oklab, var(--app-color-grid-body-text) 66%, transparent );
  --app-color-grid-icon-strong: color-mix( in oklab, var(--app-color-grid-body-text) 84%, transparent );
  --app-color-grid-control-hover: color-mix( in oklab, var(--app-color-grid-body-text) 4%, transparent );
  --app-color-grid-control-focus: color-mix( in oklab, var(--app-color-grid-body-text) 6%, transparent );
  --app-color-grid-resize-line: color-mix( in oklab, var(--app-color-grid-body-text) 18%, transparent );
  --app-color-grid-resize-line-hover: color-mix( in oklab, var(--app-color-grid-body-text) 30%, transparent );
  --app-color-grid-resize-line-active: color-mix( in oklab, var(--app-color-grid-body-text) 42%, transparent );
  --app-color-grid-selection-index: rgb(171 174 176);
  --app-color-grid-page-text: var(--app-color-grid-muted-label);
  --app-color-grid-page-text-strong: var(--app-color-grid-muted-value);
  --app-color-grid-overlay-bg: color-mix( in oklab, var(--app-color-overlay-body, rgb(var(--bg1, var(--surface)))) 94%, var(--app-color-header, rgb(var(--bg0, 17 17 17))) 6% );
  --app-color-grid-overlay-border: var(--app-color-control-border, var(--app-color-outline-stroke));
  --app-shadow-grid-overlay:
    0 14px 32px rgb(0 0 0 / 0.28),
    0 6px 18px rgb(0 0 0 / 0.18),
    0 0 0 1px rgb(255 255 255 / 0.02);
  --app-color-grid-floating-toolbar-bg: color-mix( in oklab, var(--app-color-grid-overlay-bg) 92%, var(--app-color-grid-header-bg) 8% );
  --app-color-grid-floating-toolbar-border: color-mix( in oklab, var(--app-color-primary-border-strong) 72%, var(--app-color-grid-overlay-border) 28% );
  --app-shadow-grid-floating-toolbar: 0 8px 24px rgb(0 0 0 / 0.22), 0 0 0 1px color-mix(in oklab, var(--app-color-primary-border) 72%, transparent);
  --app-color-grid-floating-toolbar-text: var(--app-color-grid-body-text);
  --app-color-grid-floating-toolbar-chip-bg: var(--app-color-grid-pill-surface);
  --app-color-grid-floating-toolbar-chip-border: var(--app-color-grid-pill-border);
  --app-color-grid-floating-toolbar-dismiss-text: color-mix( in oklab, var(--app-color-grid-floating-toolbar-text) 66%, transparent );
  --app-color-grid-floating-toolbar-action-text: color-mix( in oklab, var(--app-color-grid-floating-toolbar-text) 82%, transparent );
  --app-color-grid-control-bg: color-mix( in oklab, var(--app-color-control-bg) 72%, var(--app-color-grid-overlay-bg) 28% );
  --app-color-grid-control-bg-strong: color-mix( in oklab, var(--app-color-control-bg) 58%, var(--app-color-grid-overlay-bg) 42% );
  --app-color-grid-control-border: color-mix(in oklab, var(--app-color-outline) 60%, transparent);
  --app-color-grid-control-border-strong: color-mix( in oklab, var(--app-color-outline-strong) 78%, transparent );
  --app-color-grid-control-placeholder: color-mix( in oklab, var(--app-color-grid-body-text) 46%, transparent );
  --app-color-grid-bottom-bar-bg: color-mix( in oklab, var(--app-color-grid-control-bg) 70%, var(--app-color-grid-surface) 30% );
  --app-color-grid-bottom-bar-border: color-mix( in oklab, var(--app-color-outline) 60%, transparent );
  --app-color-grid-header-hover-bg: color-mix( in oklab, var(--app-color-grid-header-bg) 82%, var(--app-color-grid-control-bg-strong) 18% );
  --app-color-grid-header-state-line: var(--app-color-primary-text);
  --app-color-grid-header-state-line-muted: color-mix( in oklab, var(--app-color-grid-header-state-line) 58%, var(--app-color-grid-header-text-fg) 42% );
  --app-color-grid-header-filtered-bg: color-mix( in oklab, var(--app-color-grid-header-bg) 86%, var(--app-color-grid-header-state-line-muted) 14% );
  --app-color-grid-header-sorted-bg: color-mix( in oklab, var(--app-color-grid-header-bg) 88%, var(--app-color-grid-header-state-line) 12% );
  --app-color-grid-header-mixed-bg: color-mix( in oklab, var(--app-color-grid-header-sorted-bg) 54%, var(--app-color-grid-header-filtered-bg) 46% );
  --app-gradient-grid-header-state-combined-line:
    linear-gradient(
      
      90deg,
      var(--app-color-grid-header-state-line) 0%,
      var(--app-color-grid-header-state-line-muted) 100% );
  --app-color-grid-header-drop-bg: color-mix( in oklab, var(--app-color-grid-header-bg) 90%, var(--app-color-grid-header-state-line) 10% );
  --app-color-grid-body-column-accent: color-mix( in oklab, var(--app-color-grid-header-state-line) 78%, transparent );
  --app-color-grid-body-column-accent-muted: color-mix( in oklab, var(--app-color-grid-header-state-line-muted) 72%, transparent );
  --app-color-grid-row-hover-border: color-mix( in oklab, var(--app-color-grid-outline) 68%, transparent );
  --app-color-grid-sticky-divider: color-mix( in oklab, var(--app-color-grid-outline) 82%, transparent );
  --app-color-grid-search-icon: color-mix(in oklab, rgb(var(--fg)) 55%, transparent);
  --app-color-grid-search-icon-active: var(--app-color-primary);
  --app-color-grid-control-surface: rgb(var(--bg1));
  --app-color-grid-control-surface-border: rgb(var(--border) / 0.35);
  --app-color-grid-control-surface-text: rgb(var(--fg));
  --app-color-grid-control-surface-focus-border: var(--app-color-primary);
  --app-color-grid-header-separator: rgb(var(--border-strong) / 0.25);
  --app-color-grid-header-input-border: color-mix( in oklab, var(--app-color-grid-line) 74%, transparent );
  --app-color-grid-header-input-bg: color-mix( in oklab, var(--app-color-grid-surface-raised) 88%, transparent );
  --app-color-grid-quick-filter-border: color-mix( in oklab, var(--app-color-grid-line) 72%, transparent );
  --app-color-grid-quick-filter-bg: color-mix( in oklab, var(--app-color-grid-surface-raised) 86%, transparent );
  --app-color-grid-quick-filter-focus-bg: color-mix( in oklab, var(--app-color-grid-surface-raised) 94%, transparent );
  --app-color-grid-footer-divider: color-mix(in oklab, rgb(var(--border)) 55%, transparent);
  --app-color-grid-menu-bg: color-mix(in oklab, rgb(var(--surface)) 60%, transparent);
  --app-color-grid-menu-border: rgb(var(--border-strong) / 0.12);
  --app-color-grid-menu-active-outline: rgb(var(--primary) / 0.45);
  --app-color-grid-menu-active-bg: rgb(var(--primary) / 0.08);
  --app-color-grid-menu-active-text: var(--app-color-primary);
  --app-shadow-grid-menu: 0 18px 48px rgb(0 0 0 / 0.18), 0 0 0 1px rgb(var(--primary) / 0.08) inset;
  --app-color-grid-sort-badge-bg: var(--app-color-primary);
  --app-color-grid-prb-pill-bg: var(--app-color-primary-bg);
  --app-color-grid-prb-pill-border: var(--app-color-outline-strong);
  --app-color-grid-prb-pill-text: var(--app-color-text-high);
  --app-color-grid-group-row-bg: rgb(var(--app-grid-group-header-accent-rgb) / 0.14);
  --app-color-grid-group-row-border-top: rgb(var(--app-grid-group-header-accent-rgb) / 0.6);
  --app-color-grid-group-row-border-bottom: rgb(var(--app-grid-group-header-accent-rgb) / 0.4);
  --app-color-grid-group-row-edge: rgb(var(--app-grid-group-header-accent-rgb) / 0.98);
  --app-color-grid-group-row-value-bg: rgb(var(--app-grid-group-header-accent-rgb) / 0.22);
  --app-color-grid-group-row-value-border: rgb(var(--app-grid-group-header-accent-rgb) / 0.6);
  --app-color-grid-group-row-value-text: rgb(var(--fg));
  --app-color-grid-group-row-count-bg: rgb(var(--app-grid-group-header-accent-rgb) / 0.32);
  --app-color-grid-group-row-count-border: rgb(var(--app-grid-group-header-accent-rgb) / 0.7);
  --app-color-grid-group-row-count-text: rgb(var(--fg));
  --app-color-grid-group-row-aggregate-bg: rgb(var(--app-grid-group-header-accent-rgb) / 0.18);
  --app-color-grid-group-row-aggregate-border: rgb(var(--app-grid-group-header-accent-rgb) / 0.45);
  --app-color-grid-group-row-aggregate-text: rgb(var(--fg));
  --app-gradient-grid-group-row:
    linear-gradient(
      
      90deg,
      rgb(var(--app-grid-group-header-accent-rgb) / 0.7) 0%,
      rgb(var(--app-grid-group-header-accent-rgb) / 0.32) 100% );
  --app-gradient-grid-group-footer:
    linear-gradient(
      
      90deg,
      rgb(var(--app-grid-group-footer-accent-rgb) / 0.65) 0%,
      rgb(var(--app-grid-group-footer-accent-rgb) / 0.28) 100% );
  --app-color-grid-group-card-bg: color-mix( in oklab, var(--app-color-grid-surface-raised) 94%, rgb(var(--fg, 255 255 255)) 6% );
  --app-color-grid-group-card-active-bg: color-mix( in oklab, var(--app-color-grid-group-card-bg) 92%, var(--app-color-grid-row-selected) 8% );
  --app-color-grid-group-card-border: var(--app-color-grid-pill-border);
  --app-shadow-grid-group-card: 0 1px 0 color-mix(in oklab, var(--app-color-grid-line-faint) 68%, transparent);
  --app-color-grid-group-backdrop-bg: var(--app-color-grid-surface);
  --app-color-grid-group-body-bg: color-mix( in oklab, var(--app-color-grid-surface) 97%, rgb(var(--fg, 255 255 255)) 3% );
  --app-color-grid-group-body-border: var(--app-color-grid-line-soft);
  --app-color-grid-group-count-text: color-mix( in oklab, var(--app-color-text-muted) 78%, transparent );
  --app-color-grid-group-focus-outline: color-mix( in oklab, var(--app-color-primary-border-strong) 72%, transparent );
  --app-color-grid-group-partial-bg: color-mix( in oklab, var(--app-color-grid-group-card-bg) 93%, var(--app-color-primary-bg) 7% );
  --app-color-grid-group-filter-border: color-mix( in oklab, var(--app-color-grid-group-body-border) 70%, transparent );
  --app-color-grid-group-filter-bg: var(--app-color-grid-surface-raised);
  --app-color-grid-group-aggregate-chip-bg: color-mix( in oklab, var(--app-color-grid-group-body-bg) 92%, transparent );
  --app-color-grid-group-items-inner-bg: color-mix( in oklab, var(--app-color-grid-group-body-bg) 96%, black 4% );
  --app-color-grid-group-empty-border: color-mix( in oklab, var(--app-color-grid-group-body-border) 84%, transparent );
  --app-color-grid-group-empty-bg: color-mix( in oklab, var(--app-color-grid-group-body-bg) 92%, black 8% );
  --app-color-grid-group-empty-title: color-mix( in oklab, var(--app-color-text-muted) 90%, transparent );
  --app-color-grid-group-empty-action-border: color-mix( in oklab, var(--app-color-primary-border-strong) 36%, var(--app-color-grid-group-body-border) 64% );
  --app-color-grid-group-empty-action-bg: color-mix( in oklab, var(--app-color-surface) 88%, transparent );
  --app-color-grid-group-empty-action-text: var(--app-color-text-high);
  --app-color-grid-group-corner-bg: var(--app-color-grid-group-body-bg);
  --app-color-pill-tone-green-rgb: 168 202 119;
  --app-color-pill-tone-yellow-rgb: 224 185 94;
  --app-color-pill-tone-red-rgb: 223 126 120;
  --app-color-pill-tone-blue-rgb: 126 163 232;
  --app-color-pill-tone-purple-rgb: 176 141 228;
  --app-color-pill-tone-teal-rgb: 137 196 191;
  --app-color-pill-tone-orange-rgb: 214 157 104;
  --app-color-pill-tone-gray-rgb: 202 207 214;
  --app-color-grid-pill-tone-green: rgb(var(--app-color-pill-tone-green-rgb));
  --app-color-grid-pill-tone-yellow: rgb(var(--app-color-pill-tone-yellow-rgb));
  --app-color-grid-pill-tone-red: rgb(var(--app-color-pill-tone-red-rgb));
  --app-color-grid-pill-tone-blue: rgb(var(--app-color-pill-tone-blue-rgb));
  --app-color-grid-pill-tone-purple: rgb(var(--app-color-pill-tone-purple-rgb));
  --app-color-grid-pill-tone-teal: rgb(var(--app-color-pill-tone-teal-rgb));
  --app-color-grid-pill-tone-orange: rgb(var(--app-color-pill-tone-orange-rgb));
  --app-color-grid-pill-tone-gray: rgb(var(--app-color-pill-tone-gray-rgb));
  --app-color-pill-tone-green: var(--app-color-grid-pill-tone-green);
  --app-color-pill-tone-yellow: var(--app-color-grid-pill-tone-yellow);
  --app-color-pill-tone-red: var(--app-color-grid-pill-tone-red);
  --app-color-pill-tone-blue: var(--app-color-grid-pill-tone-blue);
  --app-color-pill-tone-purple: var(--app-color-grid-pill-tone-purple);
  --app-color-pill-tone-teal: var(--app-color-grid-pill-tone-teal);
  --app-color-pill-tone-orange: var(--app-color-grid-pill-tone-orange);
  --app-color-pill-tone-gray: var(--app-color-grid-pill-tone-gray);
  --app-task-status-backlog-rgb: var(--app-color-pill-tone-gray-rgb);
  --app-task-status-progress-rgb: var(--app-color-pill-tone-blue-rgb);
  --app-task-status-review-rgb: var(--app-color-pill-tone-purple-rgb);
  --app-task-status-blocked-rgb: var(--app-color-pill-tone-red-rgb);
  --app-task-status-done-rgb: var(--app-color-pill-tone-green-rgb);
  --app-task-priority-low-rgb: var(--app-color-pill-tone-gray-rgb);
  --app-task-priority-medium-rgb: var(--app-color-pill-tone-blue-rgb);
  --app-task-priority-high-rgb: var(--app-color-pill-tone-orange-rgb);
  --app-task-priority-critical-rgb: var(--app-color-pill-tone-red-rgb);
  --app-task-tone-info-rgb: var(--app-task-status-progress-rgb);
  --app-task-tone-warn-rgb: var(--app-color-pill-tone-orange-rgb);
  --app-task-tone-risk-rgb: var(--app-task-status-blocked-rgb);
  --app-task-tone-good-rgb: var(--app-task-status-done-rgb);
  --app-task-owner-color-1: var(--app-color-pill-tone-green);
  --app-task-owner-color-2: var(--app-color-pill-tone-blue);
  --app-task-owner-color-3: var(--app-color-pill-tone-orange);
  --app-task-owner-color-4: var(--app-color-pill-tone-purple);
  --app-task-owner-color-5: var(--app-color-pill-tone-yellow);
  --app-task-owner-color-6: var(--app-color-pill-tone-teal);
  --app-task-owner-color-7: var(--app-color-pill-tone-red);
  --app-task-owner-color-8: var(--app-color-pill-tone-gray);
  --app-color-task-board-column-bg: color-mix( in oklab, var(--app-color-grid-surface-raised) 95%, currentColor 5% );
  --app-color-task-board-column-bg-strong: color-mix( in oklab, var(--app-color-grid-surface-raised) 97%, currentColor 3% );
  --app-color-task-board-custom-column-bg: color-mix( in oklab, var(--app-color-grid-surface-raised) 88%, currentColor 12% );
  --app-color-task-board-status-bg: color-mix( in oklab, var(--app-color-grid-surface-raised) 74%, currentColor 26% );
  --app-shadow-grid-header-icon-focus: 0 0 0 2px color-mix(in oklab, var(--app-color-primary) 20%, transparent);
  --app-shadow-grid-header-input-focus: 0 0 0 2px color-mix(in oklab, var(--app-color-grid-header-state-line) 16%, transparent);
  --app-shadow-grid-quick-filter-clear-focus: 0 0 0 2px color-mix(in oklab, var(--app-color-primary) 18%, transparent);
  --app-shadow-grid-checkbox-focus: 0 0 0 3px color-mix(in oklab, var(--app-color-primary) 20%, transparent);
  --app-shadow-grid-calc-footer-trigger-focus: inset 0 0 0 1px color-mix(in oklab, var(--app-color-primary) 34%, transparent), 0 0 0 2px color-mix(in oklab, var(--app-color-primary) 16%, transparent);
  --app-color-grid-surface-transparent: transparent;
  --app-color-grid-focus: var(--app-color-primary);
  --app-color-grid-focus-ring: color-mix(in oklab, var(--app-color-primary) 32%, transparent);
  --app-color-grid-focus-header-bg: color-mix( in oklab, var(--app-color-grid-header-bg) 85%, var(--app-color-grid-focus) 15% );
  --app-color-grid-focus-cell-bg: color-mix( in oklab, transparent 90%, var(--app-color-grid-focus) 10% );
  --app-color-grid-focus-cell-bg-strong: color-mix( in oklab, transparent 75%, var(--app-color-grid-focus) 25% );
  --app-shadow-grid-focus: 0 0 0 4px var(--app-color-grid-focus-ring);
  --app-shadow-grid-focus-within: 0 0 0 2px var(--app-color-grid-focus-ring);
  --app-color-grid-overlay-bg-strong: color-mix( in oklab, var(--app-color-grid-overlay-bg) 92%, var(--app-color-grid-header-bg) 8% );
  --app-color-grid-overlay-subtle: color-mix( in oklab, var(--app-color-grid-overlay-bg) 96%, var(--app-color-grid-body-text) 4% );
  --app-color-grid-overlay-divider: var(--app-color-divider);
  --app-color-grid-overlay-scrim: rgb(0 0 0 / 0.46);
  --app-color-grid-menu-item-hover-bg: color-mix( in oklab, var(--app-color-primary-bg) 78%, var(--app-color-grid-overlay-bg) 22% );
  --app-shadow-grid-menu-item-hover: -2px 0 0 0 var(--app-color-primary-text) inset, 0 0 0 1px color-mix(in oklab, var(--app-color-primary-border) 74%, transparent) inset;
  --app-color-grid-menu-shortcut-bg: color-mix( in oklab, var(--app-color-grid-overlay-bg) 92%, var(--app-color-grid-body-text) 8% );
  --app-color-grid-menu-item-active-bg: color-mix( in oklab, var(--app-color-primary-bg) 82%, var(--app-color-grid-overlay-bg) 18% );
  --app-color-grid-menu-item-on-bg: color-mix( in oklab, var(--app-color-primary-bg) 76%, var(--app-color-grid-overlay-bg) 24% );
  --app-shadow-grid-menu-item-on: -2px 0 0 0 var(--app-color-primary-border) inset, 0 0 0 1px color-mix(in oklab, var(--app-color-primary-border) 60%, transparent) inset;
  --app-shadow-grid-menu-divider: 0 1px 0 rgb(0 0 0 / 0.2);
  --app-color-grid-menu-meta-bg: color-mix( in oklab, var(--app-color-grid-overlay-bg) 94%, var(--app-color-grid-body-text) 6% );
  --app-color-grid-menu-danger-hover-bg: color-mix( in oklab, var(--app-color-danger-bg) 82%, var(--app-color-grid-overlay-bg) 18% );
  --app-color-grid-menu-scrollbar-track: color-mix( in oklab, var(--app-color-grid-overlay-bg) 80%, transparent );
  --app-color-grid-menu-scrollbar-thumb: color-mix( in oklab, var(--app-color-grid-overlay-border) 72%, transparent );
  --app-color-grid-menu-scrollbar-thumb-hover: color-mix( in oklab, var(--app-color-grid-overlay-border) 92%, transparent );
  --app-shadow-grid-menu-search-focus: 0 0 0 2px color-mix(in oklab, var(--app-color-primary-text) 15%, transparent);
  --app-shadow-grid-menu-success-hover: 0 0 0 4px color-mix(in oklab, var(--app-color-success-text) 12%, transparent);
  --app-color-grid-menu-success-checked-inner: color-mix( in oklab, var(--app-color-grid-overlay-bg) 20%, black 80% );
  --app-shadow-grid-menu-success-focus: 0 0 0 4px color-mix(in oklab, var(--app-color-success-text) 16%, transparent);
  --app-color-grid-group-panel-icon: color-mix( in oklab, var(--app-color-primary-text) 72%, transparent );
  --app-color-grid-group-placeholder-border: color-mix( in oklab, var(--app-color-grid-outline) 72%, transparent );
  --app-color-grid-group-placeholder-bg: color-mix( in oklab, var(--app-color-grid-surface-raised) 28%, transparent );
  --app-color-grid-group-chip-bg: color-mix( in oklab, var(--app-color-grid-surface-raised) 46%, transparent );
  --app-color-grid-group-chip-border-hover: color-mix( in oklab, var(--app-color-primary-border-strong) 42%, var(--app-color-grid-overlay-border) 58% );
  --app-color-grid-group-chip-bg-hover: color-mix( in oklab, var(--app-color-grid-surface-raised) 58%, transparent );
  --app-color-grid-group-chip-remove-hover-bg: color-mix( in oklab, var(--app-color-danger-bg) 84%, transparent );
  --app-color-grid-group-actions-divider: color-mix( in oklab, var(--app-color-grid-overlay-divider) 78%, transparent );
  --app-color-grid-group-action-bg: color-mix( in oklab, var(--app-color-grid-surface-raised) 36%, transparent );
  --app-color-grid-group-action-border-hover: color-mix( in oklab, var(--app-color-primary-border-strong) 44%, var(--app-color-grid-overlay-border) 56% );
  --app-color-grid-group-action-bg-hover: color-mix( in oklab, var(--app-color-grid-surface-raised) 52%, transparent );
  --app-color-grid-filter-chip-bg: color-mix( in oklab, var(--app-color-primary-bg) 74%, var(--app-color-grid-surface) 26% );
  --app-color-grid-filter-chip-border: color-mix( in oklab, var(--app-color-primary-border) 72%, transparent );
  --app-color-grid-filter-clear-all-bg: color-mix( in oklab, var(--app-color-grid-overlay-bg) 82%, transparent );
  --app-color-grid-insights-panel-bg: color-mix( in oklab, var(--app-color-grid-overlay-bg) 88%, var(--app-color-primary-bg) 12% );
  --app-shadow-grid-insights-panel: 0 10px 24px rgb(0 0 0 / 0.14);
  --app-shadow-grid-primary-hover: 0 6px 16px color-mix(in oklab, var(--app-color-primary-text) 18%, transparent);
  --app-shadow-grid-bookmark-dot: 0 0 6px color-mix(in oklab, var(--app-color-primary-text) 55%, transparent);
  --app-color-grid-headline-card-bg: rgb(var(--bg1, 24 28 30) / 0.9);
  --app-color-grid-headline-card-border: rgb(var(--primary) / 0.2);
  --app-color-grid-headline-label: rgb(var(--fg, 230 230 230) / 0.65);
  --app-color-grid-headline-value: rgb(var(--fg, 245 245 245));
  --app-shadow-grid-side-panel: 0 10px 30px rgb(0 0 0 / 0.35), inset 0 0 0 1px rgb(255 255 255 / 0.02);
  --app-gradient-grid-value-bar-fill:
    linear-gradient(
      
      90deg,
      var(--app-color-primary-text),
      color-mix(in oklab, var(--app-color-primary-text) 72%, white 28%) );
  --app-color-grid-row-group-panel-border: color-mix( in oklab, var(--app-color-grid-overlay-border) 68%, transparent );
  --app-color-grid-row-group-panel-bg: color-mix( in oklab, var(--app-color-grid-overlay-bg) 82%, var(--app-color-header) 18% );
  --app-color-grid-dialog-backdrop: rgb(0 0 0 / 0.52);
  --app-color-grid-dialog-close: rgb(var(--fg, 220 220 220) / 0.6);
  --app-color-grid-dialog-close-hover-bg: color-mix( in oklab, var(--app-color-grid-overlay-bg) 88%, white 12% );
  --app-color-grid-dialog-close-hover-text: rgb(var(--fg, 220 220 220));
  --app-color-grid-help-step-number-bg: color-mix( in oklab, var(--app-color-primary-bg) 84%, var(--app-color-grid-overlay-bg) 16% );
  --app-color-grid-help-step-number-border: rgb(var(--primary) / 0.4);
  --app-color-grid-help-step-number-text: rgb(var(--primary));
  --app-color-grid-help-tip-bg: color-mix( in oklab, var(--app-color-primary-bg) 82%, var(--app-color-grid-overlay-bg) 18% );
  --app-color-grid-help-tip-border: rgb(var(--primary) / 0.6);
  --app-color-grid-help-tip-text: rgb(var(--fg, 220 220 220) / 0.8);
  --app-color-grid-dialog-footer-border: rgb(var(--border) / 0.3);
  --app-color-grid-dialog-primary-action-bg: var(--app-color-primary);
  --app-color-grid-dialog-primary-action-text: white;
  --app-color-grid-dialog-primary-action-hover-bg: color-mix( in oklab, var(--app-color-primary) 90%, white 10% );
  --app-shadow-grid-dialog-primary-action-hover: 0 6px 14px rgb(var(--primary) / 0.18);
  --app-color-grid-search-icon-idle: rgb(var(--fg, 230 230 230) / 0.55);
  --app-color-grid-search-icon-active: var(--app-color-primary);
  --app-color-grid-freshness-bg: rgb(var(--bg1, 24 28 30) / 0.8);
  --app-color-grid-freshness-border: rgb(var(--primary) / 0.25);
  --app-shadow-grid-freshness-inner: inset 0 0 0 1px rgb(255 255 255 / 0.03);
  --app-color-grid-freshness-ready: var(--app-color-success);
  --app-shadow-grid-freshness-ready: 0 0 12px color-mix(in oklab, var(--app-color-success) 70%, transparent);
  --app-color-grid-freshness-sync: var(--app-color-primary);
  --app-color-grid-freshness-label: rgb(var(--fg, 230 230 230) / 0.6);
  --app-color-grid-refresh-btn-bg: rgb(var(--primary) / 0.15);
  --app-color-grid-refresh-btn-hover-bg: rgb(var(--primary) / 0.25);
  --app-color-grid-batch-toolbar-bg: rgb(var(--primary) / 0.15);
  --app-color-grid-batch-toolbar-border: rgb(var(--primary) / 0.3);
  --app-color-grid-batch-btn-bg: rgb(var(--fg, 255 255 255) / 0.08);
  --app-color-grid-batch-btn-hover-bg: rgb(var(--fg, 255 255 255) / 0.12);
  --app-color-grid-batch-delete-hover-bg: rgb(var(--danger) / 0.2);
  --app-color-grid-batch-delete-hover-border: var(--app-color-danger);
  --app-color-grid-batch-delete-hover-text: var(--app-color-danger);
  --app-color-grid-batch-export-hover-bg: rgb(var(--success) / 0.2);
  --app-color-grid-batch-export-hover-border: var(--app-color-success);
  --app-color-grid-batch-export-hover-text: var(--app-color-success);
  --app-color-grid-batch-clear-hover-bg: rgb(156 163 175 / 0.2);
  --app-color-grid-batch-clear-hover-border: rgb(156 163 175);
  --app-color-grid-batch-clear-hover-text: rgb(156 163 175);
  --app-color-grid-header-search-input-bg: rgb(var(--bg1, 30 30 30) / 0.9);
  --app-color-grid-header-search-input-border: rgb(var(--border) / 0.7);
  --app-color-grid-header-search-input-text: rgb(var(--fg, 230 230 230));
  --app-color-grid-action-btn-bg: var(--app-color-grid-header-search-input-bg);
  --app-color-grid-action-btn-border: var(--app-color-grid-header-search-input-border);
  --app-color-grid-action-btn-text: var(--app-color-grid-header-search-input-text);
  --app-color-grid-action-btn-hover-bg: rgb(var(--primary) / 0.1);
  --app-color-grid-action-btn-hover-border: var(--app-color-primary);
  --app-color-grid-action-btn-hover-text: var(--app-color-primary);
  --app-color-grid-action-btn-active-bg: rgb(var(--primary) / 0.2);
  --app-color-grid-action-btn-active-border: rgb(var(--primary) / 0.8);
  --app-color-grid-action-btn-active-text: var(--app-color-primary);
  --app-shadow-grid-action-btn-active: 0 4px 12px rgb(var(--primary) / 0.35);
  --app-color-grid-mega-menu-border: rgb(var(--primary) / 0.2);
  --app-gradient-grid-mega-menu-bg:
    linear-gradient(
      
      135deg,
      rgb(8 12 18 / 0.95),
      rgb(15 20 32 / 0.96) );
  --app-shadow-grid-mega-menu: 0 24px 60px rgb(0 0 0 / 0.65);
  --app-color-grid-mega-subtitle: rgb(var(--fg, 230 230 230) / 0.7);
  --app-color-grid-mega-summary-bg: rgb(var(--bg1, 30 30 30) / 0.75);
  --app-color-grid-mega-summary-border: rgb(var(--border) / 0.4);
  --app-shadow-grid-mega-summary: inset 0 0 0 1px rgb(255 255 255 / 0.02);
  --app-color-grid-mega-summary-label: rgb(var(--fg, 230 230 230) / 0.6);
  --app-color-grid-mega-headline-border: rgb(var(--primary) / 0.18);
  --app-color-grid-mega-headline-bg: rgb(var(--bg1, 24 28 30) / 0.85);
  --app-color-grid-mega-headline-label: rgb(var(--fg, 232 232 232) / 0.65);
  --app-color-grid-mega-headline-value: rgb(var(--fg, 245 245 245));
  --app-color-grid-mega-section-bg: rgb(var(--bg1, 24 28 30) / 0.9);
  --app-color-grid-mega-section-border: rgb(var(--border) / 0.45);
  --app-shadow-grid-mega-section: inset 0 0 0 1px rgb(255 255 255 / 0.02);
  --app-color-grid-mega-section-subtitle: rgb(var(--fg, 230 230 230) / 0.6);
  --app-color-grid-mega-chip-bg: rgb(var(--bg0, 18 20 22) / 0.8);
  --app-color-grid-mega-chip-border: rgb(var(--border) / 0.5);
  --app-color-grid-mega-chip-text: rgb(var(--fg, 230 230 230) / 0.85);
  --app-color-grid-mega-chip-hover-border: rgb(var(--primary) / 0.6);
  --app-color-grid-mega-chip-hover-text: var(--app-color-primary);
  --app-color-grid-mega-chip-active-bg: rgb(var(--primary) / 0.15);
  --app-color-grid-mega-chip-active-border: var(--app-color-primary);
  --app-color-grid-mega-chip-active-text: var(--app-color-primary);
  --app-shadow-grid-mega-chip-active: 0 0 12px rgb(var(--primary) / 0.25);
  --app-color-grid-mega-toggle-bg: rgb(var(--bg0, 18 20 22) / 0.75);
  --app-color-grid-mega-toggle-border: rgb(var(--border) / 0.5);
  --app-color-grid-mega-toggle-text: rgb(var(--fg, 230 230 230) / 0.85);
  --app-color-grid-mega-toggle-hover-border: rgb(var(--primary) / 0.6);
  --app-color-grid-mega-toggle-hover-text: var(--app-color-primary);
  --app-color-grid-mega-toggle-active-bg: rgb(var(--primary) / 0.2);
  --app-color-grid-mega-toggle-active-border: var(--app-color-primary);
  --app-color-grid-mega-toggle-active-text: var(--app-color-primary);
  --app-shadow-grid-mega-toggle-active: 0 10px 18px rgb(var(--primary) / 0.2);
  --app-color-grid-mega-primary-border: var(--app-color-primary);
  --app-gradient-grid-mega-primary-bg:
    linear-gradient(
      
      120deg,
      rgb(var(--primary) / 0.15),
      rgb(41 171 226 / 0.25) );
  --app-gradient-grid-mega-primary-hover-bg:
    linear-gradient(
      
      120deg,
      rgb(var(--primary) / 0.25),
      rgb(41 171 226 / 0.35) );
  --app-color-grid-mega-primary-text: var(--app-color-primary);
  --app-shadow-grid-mega-primary-hover: 0 10px 20px rgb(var(--primary) / 0.25);
  --app-color-grid-scrollbar-thumb-glow: rgb(var(--primary) / 0.6);
  --app-color-grid-scrollbar-thumb: rgb(var(--primary) / 0.3);
  --app-color-grid-scrollbar-thumb-hover: rgb(var(--primary) / 0.8);
  --app-color-grid-scrollbar-thumb-active: var(--app-color-primary);
  --app-shadow-grid-scrollbar-thumb:
    inset 0 0 0 1px rgb(0 0 0 / 0.35),
    0 0 0 2px var(--app-color-grid-scrollbar-thumb-glow),
    0 12px 26px rgb(0 0 0 / 0.55);
  --app-color-grid-resize-guide-line: rgb(var(--primary) / 0.8);
  --app-shadow-grid-resize-guide-line: 0 0 14px rgb(var(--primary) / 0.4);
  --app-color-grid-resize-guide-label-bg: rgb(var(--bg1, 24 28 30) / 0.92);
  --app-color-grid-resize-guide-label-border: rgb(var(--primary) / 0.35);
  --app-shadow-grid-resize-guide-label: 0 6px 20px rgb(0 0 0 / 0.25), 0 0 0 1px rgb(var(--primary) / 0.2);
  --app-color-grid-resize-guide-label-title: rgb(var(--fg, 232 232 232) / 0.65);
  --app-color-grid-resize-guide-label-value: rgb(var(--fg, 240 240 240));
  --app-color-grid-resize-guide-label-delta: var(--app-color-primary);
  --app-color-grid-loading-overlay: rgb(0 0 0 / 0.5);
  --app-color-grid-loading-card-bg: rgb(var(--bg1, 24 28 30) / 0.95);
  --app-color-grid-loading-card-border: rgb(var(--primary) / 0.3);
  --app-shadow-grid-loading-card: 0 8px 32px rgb(0 0 0 / 0.3), 0 0 0 1px rgb(var(--primary) / 0.1);
  --app-color-grid-spinner-ring-primary: var(--app-color-primary);
  --app-color-grid-spinner-ring-secondary: rgb(var(--primary) / 0.6);
  --app-color-grid-spinner-ring-tertiary: rgb(var(--primary) / 0.3);
  --app-color-grid-loading-message: rgb(var(--fg, 230 230 230));
  --app-color-grid-loading-bar-bg: rgb(var(--primary) / 0.2);
  --app-gradient-grid-loading-progress:
    linear-gradient(
      
      90deg,
      transparent,
      var(--app-color-primary),
      transparent );
  --app-color-grid-spinner-legacy-track: rgb(255 255 255 / 0.25);
  --app-gradient-grid-skeleton-header:
    linear-gradient(
      
      90deg,
      rgb(var(--fg, 255 255 255) / 0.06),
      rgb(var(--fg, 255 255 255) / 0.1),
      rgb(var(--fg, 255 255 255) / 0.06) );
  --app-gradient-grid-skeleton-header-accent:
    linear-gradient(
      
      90deg,
      transparent 0%,
      rgb(var(--primary) / 0.15) 50%,
      transparent 100% );
  --app-gradient-grid-skeleton-row:
    linear-gradient(
      
      90deg,
      rgb(var(--fg, 255 255 255) / 0.03),
      rgb(var(--fg, 255 255 255) / 0.06),
      rgb(var(--fg, 255 255 255) / 0.03) );
  --app-gradient-grid-skeleton-row-accent:
    linear-gradient(
      
      110deg,
      transparent 0%,
      transparent 40%,
      rgb(var(--primary) / 0.1) 50%,
      transparent 60%,
      transparent 100% );
  --app-color-grid-footer-page-btn-bg: color-mix( in oklab, var(--app-color-grid-control-bg) 78%, transparent );
  --app-gradient-grid-grand-total:
    linear-gradient(
      
      90deg,
      rgb(var(--app-grid-grand-total-accent-rgb) / 0.95) 0%,
      rgb(var(--app-grid-grand-total-accent-rgb) / 0.5) 100% );
  --app-color-grid-grand-total-border-top: rgb(var(--app-grid-grand-total-accent-rgb) / 0.98);
  --app-color-grid-grand-total-border-bottom: rgb(var(--app-grid-grand-total-accent-rgb) / 0.7);
  --app-color-grid-grand-total-edge: rgb(var(--app-grid-grand-total-accent-rgb) / 0.98);
  --app-color-grid-grand-total-value-bg: rgb(var(--app-grid-grand-total-accent-rgb) / 0.82);
  --app-color-grid-grand-total-value-border: rgb(var(--app-grid-grand-total-accent-rgb) / 0.98);
  --app-gradient-grid-grand-total-overlay:
    linear-gradient(
      
      90deg,
      rgb(var(--app-grid-grand-total-accent-rgb) / 0.82) 0%,
      rgb(var(--app-grid-grand-total-accent-rgb) / 0.38) 100% );
  --app-color-grid-group-footer-row-bg: rgb(var(--app-grid-group-footer-accent-rgb) / 0.55);
  --app-color-grid-group-footer-border-top: rgb(var(--app-grid-group-footer-accent-rgb) / 0.98);
  --app-color-grid-group-footer-border-bottom: rgb(var(--app-grid-group-footer-accent-rgb) / 0.6);
  --app-color-grid-group-footer-edge: rgb(var(--app-grid-group-footer-accent-rgb) / 0.98);
  --app-color-grid-group-footer-value-bg: rgb(var(--app-grid-group-footer-accent-rgb) / 0.78);
  --app-color-grid-group-footer-value-border: rgb(var(--app-grid-group-footer-accent-rgb) / 0.98);
  --app-color-grid-group-footer-overlay: rgb(var(--app-grid-group-footer-accent-rgb) / 0.32);
  --app-color-grid-zebra-even-bg: rgb(var(--fg, 255 255 255) / 0.02);
  --app-color-grid-zebra-even-hover-bg: rgb(var(--bg1, 24 28 30) / 0.3);
  --app-color-grid-zebra-even-selected-bg: rgb(var(--primary) / 0.12);
  --app-color-grid-zebra-even-selected-hover-bg: rgb(var(--primary) / 0.18);
  --app-color-grid-zebra-odd-hover-bg: rgb(var(--bg1, 24 28 30) / 0.26);
  --app-color-grid-zebra-odd-selected-bg: rgb(var(--primary) / 0.1);
  --app-color-grid-zebra-odd-selected-hover-bg: rgb(var(--primary) / 0.15);
  --app-color-grid-fullscreen-bg: rgb(var(--bg0, 18 20 22));
  --app-color-grid-empty-title: rgb(var(--fg, 230 230 230));
  --app-color-grid-empty-message: rgb(var(--fg, 224 224 224) / 0.65);
  --app-color-grid-empty-action-border: rgb(var(--primary) / 0.3);
  --app-color-grid-empty-action-bg: rgb(var(--primary) / 0.08);
  --app-color-grid-empty-action-text: var(--app-color-primary);
  --app-color-grid-empty-action-hover-bg: rgb(var(--primary) / 0.15);
  --app-shadow-grid-empty-action-hover: 0 4px 12px rgb(var(--primary) / 0.2);
  --app-color-grid-header-sparkline-stroke: rgb(var(--primary) / 0.8);
  --app-color-grid-header-sort-indicator-bg: color-mix( in oklab, var(--app-color-grid-control-bg) 72%, transparent );
  --app-shadow-grid-header-sort-indicator: 0 0 4px rgb(var(--primary) / 0.3);
  --app-color-grid-header-sort-arrow: var(--app-color-primary);
  --app-color-grid-group-toggle-border: rgb(var(--border) / 0.55);
  --app-color-grid-group-toggle-hover-border: rgb(var(--border) / 0.8);
  --app-color-grid-group-toggle-hover-bg: rgb(var(--fg, 255 255 255) / 0.04);
  --app-color-grid-group-row-label: rgb(var(--fg, 230 230 230) / 0.65);
  --app-color-grid-group-row-value: rgb(var(--fg, 240 240 240));
  --app-color-grid-group-filter-shell-border: rgb(var(--border, 45 52 54) / 0.4);
  --app-color-grid-group-filter-shell-bg: rgb(var(--bg1, 28 32 34) / 0.6);
  --app-color-grid-group-filter-clear-bg: rgb(var(--primary) / 0.16);
  --app-color-grid-group-row-aggregate-text: rgb(var(--fg, 230 230 230) / 0.7);
  --app-color-grid-group-body-sticky-bg: color-mix( in oklab, rgb(var(--bg1, 24 28 30)) 94%, transparent );
  --app-color-grid-group-row-cell-border: rgb(var(--border, 45 52 54) / 0.2);
  --app-color-grid-group-aggregate-bg: rgb(var(--primary) / 0.08);
  --app-color-grid-group-aggregate-border: rgb(var(--primary) / 0.2);
  --app-color-grid-group-aggregate-label: rgb(var(--fg, 224 224 224) / 0.5);
  --app-color-grid-group-aggregate-value: var(--app-color-primary);
  --app-shadow-grid-chooser-search-focus: 0 0 0 2px color-mix(in oklab, var(--app-color-primary-text) 16%, transparent);
  --app-color-grid-renderer-status-active-bg: var(--app-color-success-bg);
  --app-color-grid-renderer-status-active-text: var(--app-color-success-text);
  --app-color-grid-renderer-status-active-border: var(--app-color-success-border);
  --app-color-grid-renderer-status-inactive-bg: var(--app-color-danger-bg);
  --app-color-grid-renderer-status-inactive-text: var(--app-color-danger-text);
  --app-color-grid-renderer-status-inactive-border: var(--app-color-danger-border);
  --app-color-grid-renderer-status-pending-bg: var(--app-color-warning-bg);
  --app-color-grid-renderer-status-pending-text: var(--app-color-warning-text);
  --app-color-grid-renderer-status-pending-border: var(--app-color-warning-border);
  --app-color-grid-renderer-status-completed-bg: var(--app-color-info-bg);
  --app-color-grid-renderer-status-completed-text: var(--app-color-info-text);
  --app-color-grid-renderer-status-completed-border: var(--app-color-info-border);
  --app-color-grid-renderer-status-cancelled-bg: var(--app-color-grid-pill-surface);
  --app-color-grid-renderer-status-cancelled-text: var(--app-color-grid-muted-value);
  --app-color-grid-renderer-status-cancelled-border: var(--app-color-grid-line-soft);
  --app-color-grid-renderer-status-default-bg: var(--app-color-grid-surface-raised);
  --app-color-grid-renderer-status-default-text: var(--app-color-grid-body-text);
  --app-color-grid-renderer-status-default-border: var(--app-color-grid-line);
  --app-color-grid-renderer-link: var(--app-color-primary);
  --app-color-grid-renderer-link-hover: color-mix( in oklab, var(--app-color-primary) 78%, var(--app-color-text-high) 22% );
  --app-color-grid-renderer-link-visited: color-mix( in oklab, var(--app-color-primary) 60%, var(--app-color-grid-pill-tone-purple) 40% );
  --app-color-grid-renderer-avatar-border: var(--app-color-grid-line);
  --app-gradient-grid-renderer-avatar:
    linear-gradient(
      
      135deg,
      var(--app-color-grid-pill-tone-blue) 0%,
      var(--app-color-grid-pill-tone-purple) 100% );
  --app-color-grid-renderer-avatar-text: white;
  --app-color-grid-renderer-tag-bg: color-mix( in oklab, var(--app-color-info-bg) 88%, var(--app-color-grid-surface) 12% );
  --app-color-grid-renderer-tag-text: var(--app-color-info-text);
  --app-color-grid-renderer-tag-border: var(--app-color-info-border);
  --app-color-grid-renderer-tag-more-bg: var(--app-color-grid-surface-raised);
  --app-color-grid-renderer-tag-more-text: var(--app-color-grid-muted-value);
  --app-color-grid-renderer-tag-more-border: var(--app-color-grid-line-soft);
  --app-color-grid-renderer-progress-track: var(--app-color-grid-surface-raised);
  --app-shadow-grid-renderer-progress-track: inset 0 1px 2px rgb(0 0 0 / 0.1);
  --app-gradient-grid-renderer-progress-success:
    linear-gradient(
      
      90deg,
      var(--app-color-success) 0%,
      color-mix(in oklab, var(--app-color-success) 72%, var(--app-color-info) 28%) 100% );
  --app-gradient-grid-renderer-progress-info:
    linear-gradient(
      
      90deg,
      var(--app-color-info) 0%,
      var(--app-color-primary) 100% );
  --app-gradient-grid-renderer-progress-warning:
    linear-gradient(
      
      90deg,
      var(--app-color-warning) 0%,
      var(--app-color-grid-pill-tone-orange) 100% );
  --app-gradient-grid-renderer-progress-danger:
    linear-gradient(
      
      90deg,
      var(--app-color-danger) 0%,
      var(--app-color-grid-pill-tone-red) 100% );
  --app-color-grid-renderer-progress-label: var(--app-color-grid-body-text);
  --app-shadow-grid-renderer-progress-label: 0 1px 2px rgb(255 255 255 / 0.8);
  --app-color-grid-renderer-rating-star: var(--app-color-warning);
  --app-color-grid-renderer-rating-star-empty: var(--app-color-grid-line);
  --app-color-grid-renderer-rating-value: var(--app-color-grid-muted-value);
  --app-color-grid-renderer-mark-bg: var(--app-color-warning-bg);
  --app-color-grid-renderer-mark-text: var(--app-color-warning-text);
  --app-shadow-grid-renderer-button-hover: 0 2px 4px rgb(0 0 0 / 0.1);
  --app-color-grid-renderer-btn-primary-bg: var(--app-color-primary);
  --app-color-grid-renderer-btn-primary-border: var(--app-color-primary);
  --app-color-grid-renderer-btn-secondary-bg: var(--app-color-grid-muted-value);
  --app-color-grid-renderer-btn-secondary-border: var(--app-color-grid-muted-value);
  --app-color-grid-renderer-btn-success-bg: var(--app-color-success);
  --app-color-grid-renderer-btn-success-border: var(--app-color-success);
  --app-color-grid-renderer-btn-danger-bg: var(--app-color-danger);
  --app-color-grid-renderer-btn-danger-border: var(--app-color-danger);
  --app-color-grid-renderer-btn-warning-bg: var(--app-color-warning);
  --app-color-grid-renderer-btn-warning-text: rgb(33 37 41);
  --app-color-grid-renderer-btn-warning-border: var(--app-color-warning);
  --app-color-grid-renderer-btn-info-bg: var(--app-color-info);
  --app-color-grid-renderer-btn-info-border: var(--app-color-info);
  --app-color-grid-renderer-btn-outline-primary-text: var(--app-color-primary);
  --app-color-grid-renderer-btn-outline-primary-border: var(--app-color-primary);
  --app-color-grid-renderer-print-text: black;
  --app-color-grid-renderer-print-border: black;
  --primary: 132 199 24;
  --info: 14 165 233;
  --success: 34 197 94;
  --warning: 245 158 11;
  --danger: 239 68 68;
  --data-grid-link-color: rgb(var(--primary));
  --data-grid-link-hover-color: color-mix(in oklab, rgb(var(--primary)) 88%, white 12%);
  --bg0: 17 17 17;
  --bg1: 25 25 25;
  --surface: 32 32 32;
  --surfaceA: 1;
  --border: 42 42 42;
  --border-strong: 58 58 58;
  --outline-soft: 42 42 42;
  --fg: 234 236 239;
  --muted: 110 110 110;
  --hoverA: 0.12;
  --app-bg-gradient: none;
  --app-palette-canvas: var(--bg0);
  --app-palette-shell: var(--bg1);
  --app-palette-chrome: 17 17 17;
  --app-palette-panel-body: 25 25 25;
  --app-palette-surface: var(--surface);
  --app-palette-outline: 42 42 42;
  --app-palette-outline-strong: 58 58 58;
  --app-palette-text: var(--fg);
  --app-palette-muted: var(--muted);
  --app-outline-width: 0.5px;
  --app-outline-width-strong: 0.75px;
  --app-outline-stroke-mix: 66%;
  --app-outline-stroke-strong-mix: 78%;
  --app-outline-soft-mix: 68%;
  --app-outline-divider-mix: 72%;
  --app-outline-grid-mix: 70%;
  --app-outline-empty-mix: 62%;
  --app-header-bg: var(--app-palette-chrome);
  --app-footer-bg: var(--app-palette-chrome);
  --app-corner-primary: rgb(132 199 24 / 0.58);
  --app-corner-secondary: rgb(148 163 184 / 0.22);
  --app-corner-primary-blur: 170px;
  --app-corner-secondary-blur: 120px;
  --app-corner-primary-opacity: 0.95;
  --app-corner-secondary-opacity: 0.72;
  --sideW-open: 238px;
  --sideW-collapsed: 56px;
  --fab: 36px;
  --side-toggle-overlap: calc(var(--fab) * 0.1);
  --hdrH: 36px;
  --brandH: 26px;
  --brandH-sm: 18px;
  --fs-nav: 12.5px;
  --fs-menu: 12px;
  --fs-acc-name: 11.5px;
  --fs-acc-email: 10px;
  --ico-nav: 16px;
  --ico-nav-collapsed: 19px;
  --ico-menu: 15px;
  --ico-acc: 20px;
  --h-nav: 32px;
  --h-menu-row: 34px;
  --h-org-pill: 36px;
  --h-search: 28px;
  --h-account: 42px;
  --app-shell-motion-duration-fast: 120ms;
  --app-shell-motion-duration: 180ms;
  --app-shell-motion-duration-slow: 240ms;
  --app-shell-sidebar-motion-duration: 180ms;
  --app-shell-sidebar-transition-window: 220ms;
  --app-shell-sidebar-content-stagger: 20ms;
  --app-shell-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --app-scale: 1;
  --full-height: 100dvh;
  --app-shell-height: calc((var(--full-height, 100dvh) / var(--app-scale, 1)) - var(--hdrH, 0px));
  --tooltip-bg: var(--surface);
  --tooltip-fg: var(--fg);
  --tooltip-border: var(--border);
  --tooltip-shadow: 0 12px 26px rgb(0 0 0 / 0.28);
  --tooltip-grad:
    linear-gradient(
      
      135deg,
      rgb(var(--tooltip-bg) / 0.98),
      rgb(var(--tooltip-bg) / 0.92) );
  --tooltip-bubble: var(--primary);
  --task-detail-site-bg: 17 17 17;
  --task-detail-main-bg: 17 17 17;
  --task-detail-activity-bg: 9 9 9;
  --task-detail-activity-rail-bg: 17 17 17;
  --app-color-primary: rgb(var(--primary));
  --app-color-info: rgb(var(--info));
  --app-color-success: rgb(var(--success));
  --app-color-warning: rgb(var(--warning));
  --app-color-warning-soft: rgb(253 224 71);
  --app-color-warning-soft-strong: rgb(254 240 138);
  --app-color-danger: rgb(var(--danger));
  --app-color-danger-soft: rgb(248 113 113);
  --app-color-danger-soft-strong: rgb(252 165 165);
  --app-color-danger-on-accent: color-mix(in oklab, white 94%, var(--app-color-danger) 6%);
  --app-color-primary-bg: color-mix( in oklab, var(--app-color-primary) 10%, var(--app-color-surface) );
  --app-color-primary-bg-strong: color-mix( in oklab, var(--app-color-primary) 18%, var(--app-color-surface) );
  --app-color-primary-bg-emphasis: color-mix( in oklab, var(--app-color-primary) 24%, var(--app-color-surface) );
  --app-color-primary-border: color-mix(in oklab, var(--app-color-primary) 30%, transparent);
  --app-color-primary-border-strong: color-mix(in oklab, var(--app-color-primary) 58%, transparent);
  --app-color-primary-focus-ring: color-mix(in oklab, var(--app-color-primary) 35%, transparent);
  --app-color-primary-text: var(--app-color-primary);
  --app-color-primary-text-strong: color-mix( in oklab, var(--app-color-primary) 72%, var(--app-color-text-high) 28% );
  --app-color-primary-on-accent: color-mix(in oklab, black 78%, var(--app-color-primary) 22%);
  --app-color-canvas: rgb(var(--app-palette-canvas, var(--bg0)));
  --app-color-shell: rgb(var(--app-palette-shell, var(--bg1)));
  --app-color-panel-body: rgb(var(--app-palette-panel-body, var(--bg1)));
  --app-color-surface: rgb(var(--app-palette-surface, var(--surface)));
  --app-color-header: rgb(var(--app-palette-chrome, var(--app-header-bg, var(--bg1))));
  --app-color-footer: rgb(var(--app-palette-chrome, var(--app-footer-bg, var(--bg1))));
  --app-color-overlay-panel: var(--app-color-surface);
  --app-color-overlay-header: var(--app-color-header);
  --app-color-overlay-body: var(--app-color-surface);
  --app-color-control-bg: color-mix( in oklab, var(--app-color-panel-body) 92%, var(--app-color-header) 8% );
  --app-color-card-bg: color-mix(in oklab, var(--app-color-panel-body) 94%, black 6%);
  --app-color-row-bg: color-mix(in oklab, var(--app-color-panel-body) 94%, black 6%);
  --app-color-outline: rgb(var(--app-palette-outline, var(--border)));
  --app-color-outline-strong: rgb(var(--app-palette-outline-strong, var(--border-strong)));
  --app-color-outline-soft: color-mix( in oklab, var(--app-color-outline) var(--app-outline-soft-mix), transparent );
  --app-color-outline-stroke: color-mix( in oklab, var(--app-color-outline) var(--app-outline-stroke-mix), transparent );
  --app-color-outline-stroke-strong: color-mix( in oklab, var(--app-color-outline-strong) var(--app-outline-stroke-strong-mix), transparent );
  --app-color-divider: color-mix( in oklab, var(--app-color-outline) var(--app-outline-divider-mix), transparent );
  --app-color-grid-line: color-mix( in oklab, var(--app-color-outline) var(--app-outline-grid-mix), transparent );
  --app-color-control-border: var(--app-color-outline-stroke);
  --app-color-card-border: var(--app-color-outline-stroke);
  --app-color-row-border: var(--app-color-outline-stroke);
  --app-color-empty-border: color-mix( in oklab, var(--app-color-outline-stroke) var(--app-outline-empty-mix), transparent );
  --app-outline-stroke: var(--app-outline-width) solid var(--app-color-outline-stroke);
  --app-outline-stroke-strong: var(--app-outline-width-strong) solid var(--app-color-outline-stroke-strong);
  --app-divider-stroke: var(--app-outline-width) solid var(--app-color-divider);
  --app-grid-stroke: var(--app-outline-width) solid var(--app-color-grid-line);
  --app-control-stroke: var(--app-outline-width) solid var(--app-color-control-border);
  --app-card-stroke: var(--app-outline-width) solid var(--app-color-card-border);
  --app-row-stroke: var(--app-outline-width) solid var(--app-color-row-border);
  --app-empty-stroke: var(--app-outline-width) dashed var(--app-color-empty-border);
  --app-color-text-strong: color-mix( in oklab, rgb(var(--app-palette-text, var(--fg))) 100%, transparent );
  --app-color-text-high: color-mix( in oklab, rgb(var(--app-palette-text, var(--fg))) 96%, transparent );
  --app-color-text-body: color-mix( in oklab, rgb(var(--app-palette-text, var(--fg))) 90%, transparent );
  --app-color-text-soft: color-mix( in oklab, rgb(var(--app-palette-text, var(--fg))) 78%, transparent );
  --app-color-text-muted: color-mix( in oklab, rgb(var(--app-palette-muted, var(--muted))) 100%, transparent );
  --app-color-text-faint: color-mix( in oklab, rgb(var(--app-palette-muted, var(--muted))) 86%, transparent );
  --app-color-text-quiet: color-mix( in oklab, rgb(var(--app-palette-muted, var(--muted))) 66%, transparent );
  --app-color-link: var(--app-color-primary);
  --app-color-link-hover: var(--app-color-text-high);
  --app-link-color: var(--app-color-link);
  --app-link-hover-color: var(--app-color-link-hover);
  --app-link-font-weight: 500;
  --app-link-underline-thickness: 1px;
  --app-link-underline-offset: 2px;
  --app-link-rest-padding-inline-start: 0;
  --app-link-rest-padding-inline-end: 3px;
  --app-link-hover-padding-inline-start: 3px;
  --app-link-hover-padding-inline-end: 0;
  --app-link-transition:
    padding-inline-start 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    padding-inline-end 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    color 0.2s ease,
    text-decoration-color 0.2s ease;
  --app-color-placeholder: var(--app-color-text-quiet);
  --app-color-empty-text: var(--app-color-text-quiet);
  --app-color-heading: var(--app-color-text-high);
  --app-color-subheading: var(--app-color-text-soft);
  --app-color-body: var(--app-color-text-body);
  --app-color-data-title: color-mix( in oklab, var(--app-color-body) 78%, var(--app-color-heading) 22% );
  --app-color-data-text: color-mix( in oklab, var(--app-color-body) 88%, var(--app-color-subheading) 12% );
  --app-color-label: var(--app-color-text-faint);
  --app-color-meta: var(--app-color-text-faint);
  --app-color-icon-neutral: var(--app-color-text-muted);
  --app-color-panel-heading: var(--app-color-heading);
  --app-color-panel-subheading: var(--app-color-subheading);
  --app-color-panel-body-text: var(--app-color-body);
  --app-color-panel-data-title: var(--app-color-data-title);
  --app-color-panel-data-text: var(--app-color-data-text);
  --app-color-panel-label-text: var(--app-color-label);
  --app-color-panel-meta-text: var(--app-color-meta);
  --app-color-panel-empty-text: var(--app-color-empty-text);
  --app-color-panel-section-bg: var(--app-color-card-bg);
  --app-color-panel-card-bg: var(--app-color-card-bg);
  --app-color-panel-row-bg: var(--app-color-row-bg);
  --app-color-panel-divider: var(--app-color-divider);
  --app-color-panel-grid-line: var(--app-color-grid-line);
  --app-color-info-bg: color-mix(in oklab, var(--app-color-info) 16%, var(--app-color-surface));
  --app-color-info-bg-strong: color-mix( in oklab, var(--app-color-info) 24%, var(--app-color-surface) );
  --app-color-info-border: color-mix(in oklab, var(--app-color-info) 50%, transparent);
  --app-color-info-text: var(--app-color-info);
  --app-color-success-bg: color-mix( in oklab, var(--app-color-success) 18%, var(--app-color-surface) );
  --app-color-success-bg-strong: color-mix( in oklab, var(--app-color-success) 26%, var(--app-color-surface) );
  --app-color-success-border: color-mix(in oklab, var(--app-color-success) 48%, transparent);
  --app-color-success-text: var(--app-color-success);
  --app-color-warning-bg: color-mix( in oklab, var(--app-color-warning) 16%, var(--app-color-surface) );
  --app-color-warning-bg-strong: color-mix( in oklab, var(--app-color-warning) 24%, var(--app-color-surface) );
  --app-color-warning-border: color-mix(in oklab, var(--app-color-warning) 55%, transparent);
  --app-color-warning-text: var(--app-color-warning);
  --app-color-danger-bg: color-mix(in oklab, var(--app-color-danger) 14%, var(--app-color-surface));
  --app-color-danger-bg-strong: color-mix( in oklab, var(--app-color-danger) 18%, var(--app-color-surface) );
  --app-color-danger-border: color-mix(in oklab, var(--app-color-danger-soft) 34%, transparent);
  --app-color-danger-text: var(--app-color-danger-soft);
  --app-color-supplier-action-bg: var(--app-color-text-high);
  --app-color-supplier-action-text: var(--app-color-surface);
  --app-color-supplier-action-bg-active: color-mix( in oklab, var(--app-color-text-high) 90%, var(--app-color-surface) 10% );
  --app-color-supplier-action-surface-bg: var(--app-color-supplier-action-bg);
  --app-color-supplier-action-surface-text: var(--app-color-supplier-action-text);
  --app-color-supplier-action-surface-focus-bg: color-mix( in oklab, var(--app-color-text-high) 96%, var(--app-color-surface) 4% );
  --app-color-supplier-action-divider: color-mix( in oklab, var(--app-color-supplier-action-text) 18%, transparent );
  --app-color-supplier-action-pressed-bg: color-mix( in oklab, var(--app-color-supplier-action-text) 10%, transparent );
  --app-shadow-supplier-control-top: inset 0 1px 0 color-mix(in oklab, var(--app-color-surface) 6%, transparent);
  --app-shadow-supplier-floating-control: 0 6px 18px color-mix(in oklab, var(--app-color-shadow, rgb(0 0 0)) 18%, transparent);
  --app-color-mail-supplier-bg: color-mix( in oklab, var(--app-color-primary) 32%, rgb(255 187 92) 50% );
  --app-color-mail-supplier-border: color-mix( in oklab, var(--app-color-mail-supplier-bg) 70%, transparent );
  --app-color-mail-supplier-text: rgb(32 21 3);
  --app-color-mail-official-bg: color-mix( in oklab, var(--app-color-primary) 38%, rgb(176 166 255) 52% );
  --app-color-mail-official-border: color-mix( in oklab, var(--app-color-mail-official-bg) 70%, transparent );
  --app-color-mail-official-text: rgb(19 24 45);
  --app-color-mail-hybrid-bg: color-mix( in oklab, var(--app-color-mail-supplier-bg) 50%, var(--app-color-mail-official-bg) 50% );
  --app-color-mail-hybrid-border: color-mix( in oklab, var(--app-color-mail-hybrid-bg) 80%, transparent );
  --app-color-mail-hybrid-text: rgb(18 18 18);
  --app-color-note-highlight: rgb(255 229 138);
  --app-color-note-highlight-text: color-mix( in oklab, black 84%, var(--app-color-note-highlight) 16% );
  --app-color-empty-pill-bg: color-mix( in oklab, var(--app-color-surface) 80%, var(--app-color-outline) 20% );
  --app-color-empty-pill-border: color-mix(in oklab, var(--app-color-outline) 65%, transparent);
  --app-color-empty-pill-text: color-mix( in oklab, var(--app-color-text-body) 65%, var(--app-color-outline) 35% );
  --app-color-tab-inactive: var(--app-color-text-muted);
  --app-color-tab-hover: color-mix( in oklab, var(--app-color-primary) 76%, var(--app-color-text-body) 24% );
  --app-color-tab-active: var(--app-color-text-body);
  --app-color-tab-indicator: var(--app-color-primary);
  --app-color-tab-badge-bg: color-mix( in oklab, var(--app-color-primary) 16%, var(--app-color-header) );
  --app-color-tab-badge-text: var(--app-color-primary);
  --app-color-toolbar-hover-bg: color-mix( in oklab, var(--app-color-control-bg) 88%, var(--app-color-text-high) 12% );
  --app-color-toolbar-hover-border: color-mix( in oklab, var(--app-color-outline-stroke-strong) 72%, var(--app-color-text-high) 28% );
  --app-color-toolbar-hover-fg: var(--app-color-text-high);
  --app-color-toolbar-hover-icon: var(--app-color-text-high);
  --app-color-toolbar-selected-accent: #221b53;
  --app-color-toolbar-selected-bg: var(--app-color-toolbar-selected-accent);
  --app-color-toolbar-selected-border: var(--app-color-outline-stroke);
  --app-color-toolbar-selected-content: color-mix( in oklab, rgb(255 255 255) 82%, var(--app-color-toolbar-selected-bg) 18% );
  --app-color-toolbar-selected-fg: var(--app-color-toolbar-selected-content);
  --app-color-toolbar-selected-icon: var(--app-color-toolbar-selected-content);
  --app-color-toolbar-active-bg: var(--app-color-toolbar-selected-bg);
  --app-color-toolbar-active-border: var(--app-color-toolbar-selected-border);
  --app-color-toolbar-active-fg: var(--app-color-toolbar-selected-fg);
  --app-color-toolbar-active-icon: var(--app-color-toolbar-selected-icon);
  --app-color-toolbar-filled-bg: var(--app-color-text-high);
  --app-color-toolbar-filled-border: color-mix( in oklab, var(--app-color-text-high) 18%, transparent );
  --app-color-toolbar-filled-fg: var(--app-color-shell);
  --app-color-toolbar-filled-hover-bg: color-mix( in oklab, var(--app-color-text-high) 88%, var(--app-color-shell) 12% );
  --app-color-toolbar-filled-hover-border: color-mix( in oklab, var(--app-color-text-high) 28%, transparent );
  --app-color-toolbar-filled-hover-fg: var(--app-color-shell);
  --app-shell-sidebar-bg: var(--app-color-shell);
  --app-shell-header-bg: var(--app-shell-sidebar-bg);
  --app-shell-panel-bg: var(--app-color-panel-body);
  --app-shell-subpanel-bg: var(--app-shell-panel-bg);
  --app-shell-subpanel-border: var(--app-card-stroke);
  --app-shell-subpanel-divider: var(--app-shell-divider-stroke);
  --app-shell-subpanel-item-hover-bg: var(--app-shell-control-bg-hover);
  --app-shell-subpanel-item-active-bg: var(--app-shell-control-bg-active);
  --app-shell-nav-active-bg: color-mix( in oklab, var(--app-shell-control-bg-hover) 58%, var(--app-shell-sidebar-bg) 42% );
  --app-shell-nav-active-border: var(--app-shell-control-border-hover);
  --app-shell-nav-active-border-strong: var(--app-shell-control-border-hover);
  --app-shell-nav-active-text: var(--app-shell-text);
  --app-shell-stage-context-bg: color-mix( in oklab, var(--app-shell-control-bg-hover) 78%, var(--app-shell-sidebar-bg) 22% );
  --app-shell-stage-context-text: var(--app-shell-text);
  --app-shell-control-bg: var(--app-color-control-bg);
  --app-shell-control-bg-hover: var(--app-color-toolbar-hover-bg);
  --app-shell-control-bg-active: var(--app-color-toolbar-active-bg);
  --app-shell-control-border: var(--app-color-control-border);
  --app-shell-control-border-hover: var(--app-color-toolbar-hover-border);
  --app-shell-control-border-active: var(--app-color-toolbar-active-border);
  --app-shell-accent-bg: var(--app-color-primary-bg);
  --app-shell-accent-bg-strong: var(--app-color-primary-bg-strong);
  --app-shell-accent-border: var(--app-color-primary-border);
  --app-shell-accent-border-strong: var(--app-color-primary-border-strong);
  --app-shell-accent-text: var(--app-color-primary-text-strong);
  --app-shell-text: var(--app-color-text-high);
  --app-shell-text-soft: var(--app-color-text-soft);
  --app-shell-text-muted: var(--app-color-text-muted);
  --app-shell-icon: var(--app-color-text-muted);
  --app-shell-icon-active: var(--app-color-primary-text);
  --app-shell-divider-stroke: var(--app-divider-stroke);
  --app-shell-focus-ring: 0 0 0 3px var(--app-color-primary-focus-ring);
  --app-shell-panel-shadow: var(--app-shadow-overlay);
  --app-shell-badge-danger-bg: var(--app-color-danger);
  --app-shell-badge-danger-text: var(--app-color-danger-on-accent);
  --app-color-scroll-thumb: rgb(255 255 255 / 0.12);
  --app-color-scroll-thumb-hover: rgb(255 255 255 / 0.18);
  --app-shadow-soft: 0 1px 3px rgb(0 0 0 / 0.1);
  --app-shadow-card: 0 4px 10px rgb(0 0 0 / 0.18);
  --app-shadow-panel: 0 8px 18px rgb(0 0 0 / 0.18);
  --app-shadow-panel-strong: 0 22px 60px rgb(0 0 0 / 0.45), 0 6px 20px rgb(0 0 0 / 0.25);
  --app-shadow-overlay: 0 8px 20px rgb(0 0 0 / 0.18), 0 2px 6px rgb(0 0 0 / 0.1);
  --app-shadow-primary-soft: 0 4px 12px color-mix(in oklab, var(--app-color-primary) 22%, transparent);
  --app-shadow-primary-strong: 0 6px 18px color-mix(in oklab, var(--app-color-primary) 34%, transparent);
  --app-shadow-danger-soft: 0 4px 14px color-mix(in oklab, var(--app-color-danger-soft) 35%, transparent);
  --app-type-panel-title-size: clamp(1.06rem, 1.16vw, 1.22rem);
  --app-type-panel-title-weight: 700;
  --app-type-section-title-size: 13px;
  --app-type-section-title-weight: 800;
  --app-type-section-meta-size: 11px;
  --app-type-section-meta-weight: 600;
  --app-type-card-title-size: 12px;
  --app-type-card-title-weight: 700;
  --app-type-body-size: 14px;
  --app-type-body-weight: 600;
  --app-type-card-value-size: 10px;
  --app-type-card-value-weight: 500;
  --app-type-label-size: 10px;
  --app-type-label-weight: 700;
  --app-type-label-size-xs: 8px;
  --app-type-label-weight-xs: 800;
  --app-type-meta-size: 10px;
  --app-type-meta-weight: 500;
  --app-type-tab-size: 14px;
  --app-type-tab-weight: 700;
  --app-type-empty-size: 12px;
}
html[data-theme=light] {
  color-scheme: light;
  --bg0: 255 255 255;
  --bg1: 249 249 249;
  --app-palette-canvas: var(--bg0);
  --app-palette-shell: var(--bg1);
  --app-palette-chrome: 249 249 249;
  --app-palette-panel-body: 255 255 255;
  --app-header-bg: var(--app-palette-chrome);
  --app-footer-bg: var(--app-palette-chrome);
  --surface: 255 255 255;
  --app-palette-surface: var(--surface);
  --surfaceA: 1;
  --border: 232 232 232;
  --border-strong: 214 214 214;
  --outline-soft: 232 232 232;
  --app-palette-outline: var(--border);
  --app-palette-outline-strong: var(--border-strong);
  --app-outline-stroke-mix: 72%;
  --app-outline-stroke-strong-mix: 84%;
  --app-outline-soft-mix: 74%;
  --app-outline-divider-mix: 78%;
  --app-outline-grid-mix: 76%;
  --app-outline-empty-mix: 68%;
  --fg: 31 35 43;
  --muted: 141 141 141;
  --app-palette-text: var(--fg);
  --app-palette-muted: var(--muted);
  --hoverA: 0.08;
  --app-bg-gradient: none;
  --app-corner-primary: rgb(132 199 24 / 0.44);
  --app-corner-secondary: rgb(255 255 255 / 0.62);
  --app-corner-primary-blur: 150px;
  --app-corner-secondary-blur: 110px;
  --app-corner-primary-opacity: 0.95;
  --app-corner-secondary-opacity: 0.86;
  --tooltip-bg: var(--surface);
  --tooltip-fg: var(--fg);
  --tooltip-border: var(--border);
  --tooltip-shadow: 0 10px 24px rgb(15 23 42 / 0.14);
  --task-detail-site-bg: 255 255 255;
  --task-detail-main-bg: 255 255 255;
  --task-detail-activity-bg: 249 249 249;
  --task-detail-activity-rail-bg: 255 255 255;
  --app-color-card-bg: color-mix( in oklab, var(--app-color-panel-body) 98%, var(--app-color-shell) 2% );
  --app-color-row-bg: color-mix( in oklab, var(--app-color-panel-body) 98%, var(--app-color-shell) 2% );
  --app-color-control-bg: color-mix( in oklab, var(--app-color-panel-body) 96%, var(--app-color-shell) 4% );
  --app-color-text-strong: rgb(24 28 36);
  --app-color-text-high: rgb(31 35 43);
  --app-color-text-body: rgb(76 84 96);
  --app-color-text-soft: rgb(109 118 131);
  --app-color-text-muted: rgb(141 141 141);
  --app-color-text-faint: rgb(157 163 171);
  --app-color-text-quiet: rgb(176 181 188);
  --app-color-grid-checkbox-bg: rgb(255 255 255);
  --app-color-grid-checkbox-bg-hover: rgb(248 250 252);
  --app-color-grid-checkbox-border: rgb(148 156 169);
  --app-color-grid-checkbox-border-strong: rgb(121 129 142);
  --app-color-grid-checkbox-check: rgb(255 255 255);
  --app-color-grid-checkbox-checked-bg: var(--app-color-primary);
  --app-color-grid-header-bg: rgb(252 252 252);
  --app-color-grid-row-hover: rgb(240 240 240);
  --app-color-grid-header-cell-fg: rgb(32 32 32);
  --app-color-grid-header-text-fg: rgb(131 131 131);
  --app-color-grid-surface: color-mix(in oklab, white 97%, rgb(var(--bg0, 255 255 255)) 3%);
  --app-color-grid-surface-raised: color-mix(in oklab, white 98%, rgb(var(--bg1, 248 250 252)) 2%);
  --app-color-grid-outline: color-mix( in oklab, rgb(var(--border-strong, var(--border))) 48%, transparent );
  --app-color-grid-line: color-mix( in oklab, rgb(var(--border-strong, var(--border))) 72%, transparent );
  --app-color-grid-line-soft: color-mix( in oklab, rgb(var(--border-strong, var(--border))) 54%, transparent );
  --app-color-grid-line-faint: color-mix( in oklab, rgb(var(--border-strong, var(--border))) 36%, transparent );
  --app-color-grid-row-selected: color-mix( in oklab, rgb(var(--primary, 132 199 24)) 12%, white 88% );
  --app-color-grid-body-text: #292d34;
  --app-color-grid-body-text-soft: color-mix(in oklab, rgb(var(--fg, 15 23 42)) 68%, white 32%);
  --app-color-grid-link: #292d34;
  --app-color-grid-link-hover: #292d34;
  --app-color-grid-pill-border: color-mix( in oklab, rgb(var(--border-strong, var(--border))) 40%, transparent );
  --app-color-grid-pill-surface: color-mix(in oklab, white 96%, rgb(var(--bg1, 248 250 252)) 4%);
  --app-color-grid-pill-text: color-mix(in oklab, rgb(var(--fg, 15 23 42)) 76%, transparent);
  --app-color-grid-muted-label: color-mix(in oklab, rgb(var(--fg, 15 23 42)) 44%, transparent);
  --app-color-grid-muted-value: color-mix(in oklab, rgb(var(--fg, 15 23 42)) 72%, transparent);
  --app-color-grid-muted-placeholder: color-mix( in oklab, rgb(var(--fg, 15 23 42)) 50%, transparent );
  --app-color-grid-selection-index: color-mix(in oklab, rgb(var(--fg, 15 23 42)) 54%, white 46%);
  --app-color-pill-tone-green-rgb: 78 128 62;
  --app-color-pill-tone-yellow-rgb: 160 117 36;
  --app-color-pill-tone-red-rgb: 178 81 76;
  --app-color-pill-tone-blue-rgb: 61 104 183;
  --app-color-pill-tone-purple-rgb: 116 84 174;
  --app-color-pill-tone-teal-rgb: 43 118 113;
  --app-color-pill-tone-orange-rgb: 168 108 42;
  --app-color-pill-tone-gray-rgb: 94 101 113;
  --app-shadow-grid-group-card: 0 1px 0 rgb(15 23 42 / 0.035);
  --app-color-heading: var(--app-color-text-high);
  --app-color-subheading: var(--app-color-text-soft);
  --app-color-body: var(--app-color-text-body);
  --app-color-data-title: rgb(88 96 108);
  --app-color-data-text: rgb(108 117 129);
  --app-color-label: var(--app-color-text-muted);
  --app-color-meta: var(--app-color-text-soft);
  --app-color-empty-text: var(--app-color-text-quiet);
  --app-color-toolbar-selected-bg: color-mix( in oklab, var(--app-color-toolbar-selected-accent) 10%, rgb(255 255 255) 90% );
  --app-color-toolbar-selected-border: color-mix( in oklab, var(--app-color-toolbar-selected-accent) 30%, rgb(255 255 255) 70% );
  --app-color-toolbar-selected-content: var(--app-color-toolbar-selected-accent);
  --app-color-tab-inactive: var(--app-color-text-soft);
  --app-color-tab-active: var(--app-color-text-high);
  --app-color-scroll-thumb: rgb(148 163 184 / 0.34);
  --app-color-scroll-thumb-hover: rgb(148 163 184 / 0.5);
  --app-shadow-card: 0 2px 8px rgb(15 23 42 / 0.06);
  --app-shadow-panel: 0 8px 18px rgb(15 23 42 / 0.08);
  --app-shadow-panel-strong: 0 22px 60px rgb(15 23 42 / 0.14), 0 6px 20px rgb(15 23 42 / 0.08);
  --app-shadow-overlay: 0 14px 24px rgb(15 23 42 / 0.14), 0 2px 8px rgb(15 23 42 / 0.08);
}
html[data-theme=dark],
html:not([data-theme]),
html.dark-mode,
html.theme-dark,
body.dark-mode,
body.theme-dark,
body[data-theme=dark] {
  color-scheme: dark;
  --bg0: 17 17 17;
  --bg1: 25 25 25;
  --app-palette-canvas: var(--bg0);
  --app-palette-shell: var(--bg1);
  --app-palette-chrome: 17 17 17;
  --app-palette-panel-body: 25 25 25;
  --app-header-bg: var(--app-palette-chrome);
  --app-footer-bg: var(--app-palette-chrome);
  --surface: 32 32 32;
  --app-palette-surface: var(--surface);
  --surfaceA: 1;
  --border: 42 42 42;
  --border-strong: 58 58 58;
  --outline-soft: 42 42 42;
  --app-palette-outline: var(--border);
  --app-palette-outline-strong: var(--border-strong);
  --app-outline-stroke-mix: 64%;
  --app-outline-stroke-strong-mix: 76%;
  --app-outline-soft-mix: 66%;
  --app-outline-divider-mix: 70%;
  --app-outline-grid-mix: 68%;
  --app-outline-empty-mix: 60%;
  --fg: 234 236 239;
  --muted: 110 110 110;
  --app-color-grid-checkbox-bg: rgb(17 17 17);
  --app-color-grid-checkbox-bg-hover: rgb(17 17 17);
  --app-color-grid-checkbox-border: rgb(110 110 110);
  --app-color-grid-checkbox-border-strong: rgb(110 110 110);
  --app-color-grid-checkbox-check: rgb(255 255 255);
  --app-color-grid-checkbox-checked-bg: var(--app-color-primary);
  --app-color-grid-header-bg: rgb(25 25 25);
  --app-color-grid-row-hover: var(--app-color-grid-header-bg);
  --app-color-grid-header-cell-fg: rgb(238 238 238);
  --app-color-grid-header-text-fg: rgb(123 123 123);
  --app-color-grid-group-backdrop-bg: rgb(9 9 9);
  --app-color-grid-group-table-body-bg: rgb(9 9 9);
  --app-color-grid-group-body-bg: rgb(9 9 9);
  --app-color-grid-group-items-inner-bg: rgb(9 9 9);
  --app-color-grid-group-card-bg: rgb(17 17 17);
  --app-color-grid-group-corner-bg: rgb(17 17 17);
  --app-palette-text: var(--fg);
  --app-palette-muted: var(--muted);
  --hoverA: 0.12;
  --app-bg-gradient: none;
  --app-corner-primary: rgb(132 199 24 / 0.58);
  --app-corner-secondary: rgb(148 163 184 / 0.22);
  --app-corner-primary-blur: 170px;
  --app-corner-secondary-blur: 120px;
  --app-corner-primary-opacity: 0.95;
  --app-corner-secondary-opacity: 0.72;
  --tooltip-bg: var(--surface);
  --tooltip-fg: var(--fg);
  --tooltip-border: var(--border);
  --tooltip-shadow: 0 12px 26px rgb(0 0 0 / 0.28);
  --task-detail-site-bg: 17 17 17;
  --task-detail-main-bg: 17 17 17;
  --task-detail-activity-bg: 9 9 9;
  --task-detail-activity-rail-bg: 17 17 17;
  --app-color-card-bg: color-mix(in oklab, var(--app-color-panel-body) 94%, black 6%);
  --app-color-row-bg: color-mix(in oklab, var(--app-color-panel-body) 94%, black 6%);
  --app-color-control-bg: color-mix( in oklab, var(--app-color-panel-body) 90%, var(--app-color-header) 10% );
  --app-color-heading: rgb(232 236 239);
  --app-color-subheading: rgb(160 166 174);
  --app-color-body: rgb(212 216 221);
  --app-color-data-title: rgb(194 200 208);
  --app-color-data-text: rgb(176 183 191);
  --app-color-label: rgb(110 110 110);
  --app-color-meta: rgb(138 144 150);
  --app-color-empty-text: rgb(96 101 108);
  --app-color-tab-inactive: rgb(110 110 110);
  --app-color-tab-active: rgb(234 236 239);
}
html[data-theme=teal] {
  --primary: 18 184 134;
  --app-color-grid-group-backdrop-bg: rgb(9 9 9);
  --app-color-grid-group-table-body-bg: rgb(9 9 9);
  --app-color-grid-group-body-bg: rgb(9 9 9);
  --app-color-grid-group-items-inner-bg: rgb(9 9 9);
  --app-color-grid-group-card-bg: rgb(17 17 17);
  --app-color-grid-group-corner-bg: rgb(17 17 17);
}
html[data-theme=violet] {
  --primary: 139 92 246;
  --app-color-grid-group-backdrop-bg: rgb(9 9 9);
  --app-color-grid-group-table-body-bg: rgb(9 9 9);
  --app-color-grid-group-body-bg: rgb(9 9 9);
  --app-color-grid-group-items-inner-bg: rgb(9 9 9);
  --app-color-grid-group-card-bg: rgb(17 17 17);
  --app-color-grid-group-corner-bg: rgb(17 17 17);
}
html[data-theme=amber] {
  --primary: 245 158 11;
  --app-color-grid-group-backdrop-bg: rgb(9 9 9);
  --app-color-grid-group-table-body-bg: rgb(9 9 9);
  --app-color-grid-group-body-bg: rgb(9 9 9);
  --app-color-grid-group-items-inner-bg: rgb(9 9 9);
  --app-color-grid-group-card-bg: rgb(17 17 17);
  --app-color-grid-group-corner-bg: rgb(17 17 17);
}
html[data-theme=aurora] {
  color-scheme: dark;
  --primary: 132 199 24;
  --bg0: 10 15 20;
  --bg1: 16 24 32;
  --surface: 18 28 40;
  --surfaceA: 0.68;
  --border: 70 105 130;
  --border-strong: 58 92 118;
  --fg: 220 233 240;
  --muted: 148 162 177;
  --hoverA: 0.12;
  --app-palette-canvas: var(--bg0);
  --app-palette-shell: var(--bg1);
  --app-palette-chrome: 10 15 20;
  --app-palette-panel-body: 16 24 32;
  --app-palette-surface: var(--surface);
  --app-palette-outline: 70 105 130;
  --app-palette-outline-strong: 58 92 118;
  --app-palette-text: var(--fg);
  --app-palette-muted: var(--muted);
  --app-header-bg: var(--app-palette-chrome);
  --app-footer-bg: var(--app-palette-chrome);
  --tooltip-bg: var(--surface);
  --tooltip-fg: var(--fg);
  --tooltip-border: var(--border);
  --tooltip-shadow: 0 18px 34px rgb(4 10 18 / 0.45);
  --task-detail-site-bg: 10 15 20;
  --task-detail-main-bg: 10 15 20;
  --task-detail-activity-bg: 7 11 15;
  --task-detail-activity-rail-bg: 10 15 20;
  --app-color-grid-group-backdrop-bg: rgb(9 9 9);
  --app-color-grid-group-table-body-bg: rgb(9 9 9);
  --app-color-grid-group-body-bg: rgb(9 9 9);
  --app-color-grid-group-items-inner-bg: rgb(9 9 9);
  --app-color-grid-group-card-bg: rgb(17 17 17);
  --app-color-grid-group-corner-bg: rgb(17 17 17);
}
body[data-theme=aurora],
body.theme-aurora,
html.theme-aurora {
  --app-color-grid-group-backdrop-bg: rgb(9 9 9);
  --app-color-grid-group-table-body-bg: rgb(9 9 9);
  --app-color-grid-group-body-bg: rgb(9 9 9);
  --app-color-grid-group-items-inner-bg: rgb(9 9 9);
  --app-color-grid-group-card-bg: rgb(17 17 17);
  --app-color-grid-group-corner-bg: rgb(17 17 17);
}
html[data-theme=aurora] .bg-app {
  position: relative;
  background-color: rgb(var(--bg0));
  background-image: var(--app-bg-gradient);
  background-repeat: no-repeat;
  background-size: cover;
  overflow: visible;
}
html[data-theme=aurora] .theme {
  position: relative;
  z-index: calc(var(--z-dropdown) + 10);
}
html[data-theme=aurora] .bg-bar,
html[data-theme=aurora] header {
  background: rgba(11, 17, 24, 0.72);
  border-bottom: 1px solid rgba(148, 187, 233, 0.08);
  box-shadow: 0 20px 48px rgba(4, 9, 14, 0.45);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
html[data-theme=aurora] .sidebar {
  background: rgba(11, 17, 24, 0.72);
  border-right: 1px solid rgba(148, 187, 233, 0.08);
  box-shadow: 10px 0 40px rgba(4, 9, 14, 0.45);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
html[data-theme=aurora] .menu-panel {
  background:
    linear-gradient(
      160deg,
      rgba(6, 12, 20, 0.96) 0%,
      rgba(10, 18, 28, 0.98) 70%,
      rgba(4, 10, 18, 0.98) 100%) !important;
  border: 1px solid rgba(148, 187, 233, 0.25);
  box-shadow: 0 22px 48px rgba(2, 6, 12, 0.55);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  isolation: isolate;
}
html[data-theme=aurora] .card,
html[data-theme=aurora] .panel,
html[data-theme=aurora] .table-card,
html[data-theme=aurora] .stat,
html[data-theme=aurora] .metric,
html[data-theme=aurora] .list li,
html[data-theme=aurora] .actions-list li,
html[data-theme=aurora] .summary .block {
  background:
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.07) 0%,
      rgba(12, 18, 26, 0.6) 100%);
  border: 1px solid rgba(148, 187, 233, 0.12);
  box-shadow: 0 20px 48px rgba(4, 9, 14, 0.35);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
html[data-theme=aurora] .metric .value,
html[data-theme=aurora] .summary .value {
  color: rgba(255, 255, 255, 0.9);
}
html[data-theme=aurora] .metric .note,
html[data-theme=aurora] .list .meta {
  color: rgba(223, 231, 238, 0.6);
}
html[data-theme=aurora] .btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 28px rgba(4, 10, 18, 0.35);
}
html[data-theme=aurora] .btn.primary {
  background:
    linear-gradient(
      135deg,
      rgba(45, 212, 191, 0.85),
      rgba(56, 189, 248, 0.75));
  border: 1px solid rgba(56, 189, 248, 0.45);
  color: #041016;
  box-shadow: 0 22px 46px rgba(37, 211, 166, 0.28);
}
html[data-theme=aurora] .btn.ghost {
  background: rgba(10, 16, 22, 0.6);
  border: 1px solid rgba(148, 187, 233, 0.16);
  color: rgba(223, 231, 238, 0.85);
}
html[data-theme=aurora] .btn.danger {
  background: rgba(244, 63, 94, 0.18);
  border: 1px solid rgba(244, 63, 94, 0.32);
  color: #ffd9e0;
  box-shadow: 0 16px 34px rgba(244, 63, 94, 0.25);
}
html[data-theme=aurora] .badge,
html[data-theme=aurora] .pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(223, 231, 238, 0.85);
}
html[data-theme=aurora] .pill.info {
  background: rgba(56, 189, 248, 0.2);
  border-color: rgba(56, 189, 248, 0.38);
  color: #b5e4ff;
}
html[data-theme=aurora] .pill.warn {
  background: rgba(250, 204, 21, 0.18);
  border-color: rgba(250, 204, 21, 0.35);
  color: #fce088;
}
html[data-theme=aurora] .pill.success {
  background: rgba(34, 197, 94, 0.18);
  border-color: rgba(34, 197, 94, 0.35);
  color: #a8f4c9;
}
html[data-theme=aurora] .pill.danger {
  background: rgba(244, 63, 94, 0.2);
  border-color: rgba(244, 63, 94, 0.4);
  color: #ffc6d3;
}
html[data-theme=aurora] .pill.neutral {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(223, 231, 238, 0.72);
}
html[data-theme=aurora] .search {
  background: rgba(10, 16, 22, 0.75);
  border: 1px solid rgba(148, 187, 233, 0.16);
  box-shadow: 0 12px 28px rgba(4, 10, 18, 0.35);
}
html[data-theme=aurora] .org-pill,
html[data-theme=aurora] .account-pill {
  background: rgba(12, 20, 28, 0.65);
  border: 1px solid rgba(148, 187, 233, 0.18);
  box-shadow: 0 16px 36px rgba(4, 9, 14, 0.32);
}
:where(.app-link, .link, .data-grid-link, .official-link) {
  color: var(--app-link-color) !important;
  -webkit-text-fill-color: var(--app-link-color) !important;
  text-decoration: underline !important;
  text-decoration-color: currentColor !important;
  text-decoration-thickness: var(--app-link-underline-thickness);
  text-underline-offset: var(--app-link-underline-offset);
  cursor: pointer;
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  padding-inline-start: var(--app-link-rest-padding-inline-start);
  padding-inline-end: var(--app-link-rest-padding-inline-end);
  transition: var(--app-link-transition);
  font-weight: var(--app-link-font-weight);
}
:where(.app-link, .link, .data-grid-link, .official-link):hover {
  color: var(--app-link-hover-color) !important;
  -webkit-text-fill-color: var(--app-link-hover-color) !important;
  padding-inline-start: var(--app-link-hover-padding-inline-start);
  padding-inline-end: var(--app-link-hover-padding-inline-end);
}
:where(.app-link, .link, .data-grid-link, .official-link):focus,
:where(.app-link, .link, .data-grid-link, .official-link):focus-visible,
:where(.app-link, .link, .data-grid-link, .official-link):active {
  outline: none;
  box-shadow: none;
  background: transparent;
}
:where(button, [role=button], summary):focus,
:where(button, [role=button], summary):focus-visible,
:where(button, [role=button], summary):active {
  outline: none !important;
  box-shadow: none !important;
}

/* src/styles.css */
* {
  box-sizing: border-box;
}
html,
body {
  height: var(--full-height, 100dvh);
  min-height: var(--full-height, 100dvh);
}
body {
  margin: 0;
  font-family: var(--app-theme-font-sans, var(--app-font-family-sans));
  font-size: 12.5px;
  line-height: 1.5;
  background-color: rgb(var(--bg0));
  background-image: var(--app-bg-gradient);
  background-repeat: no-repeat;
  background-size: cover;
  color: rgb(var(--fg));
  overflow: visible;
  zoom: var(--app-scale);
}
.sidebar-bottom {
  padding-bottom: calc(12px / var(--app-scale));
}
a,
button,
select,
input {
  font: inherit;
  color: inherit;
}
button {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  appearance: none;
}
:focus {
  outline: none;
}
html.keyboard-navigation :where(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--app-color-primary-border-strong);
  outline-offset: 2px;
}
html.suppress-pointer-hover body,
html.suppress-pointer-hover body * {
  pointer-events: none !important;
}
:where([role=dialog], [role=menu], [role=listbox], [role=tree], [role=grid], [popover], .cdk-overlay-pane, .cdk-overlay-container, .mat-mdc-menu-panel, .mat-mdc-dialog-container, .mat-mdc-select-panel):focus,
:where([role=dialog], [role=menu], [role=listbox], [role=tree], [role=grid], [popover], .cdk-overlay-pane, .cdk-overlay-container, .mat-mdc-menu-panel, .mat-mdc-dialog-container, .mat-mdc-select-panel):focus-visible {
  outline: none;
  box-shadow: none;
}
html.theme-no-anim,
html.theme-no-anim *,
html.theme-no-anim *::before,
html.theme-no-anim *::after {
  transition: none !important;
}
body.theme-switching .sidebar,
body.theme-switching .sidebar *,
body.theme-switching .sidebar *::before,
body.theme-switching .sidebar *::after {
  transition: none !important;
}
h1,
h2,
h3,
h4,
h5,
h6,
.title,
.heading,
.hdr-title,
.ttl,
.h,
.org-name,
.name,
.label {
  text-transform: uppercase !important;
  letter-spacing: 0.3px;
}
html,
body,
app-root {
  font-family: var(--app-theme-font-sans, var(--app-font-family-sans));
}
body.auth-route {
  background-image: none;
  background-color: #080c10;
}
body :where(:not(i):not(svg):not(svg *):not(code):not(pre):not(kbd):not(samp)) {
  font-family: var(--app-theme-font-sans, var(--app-font-family-sans)) !important;
}
.engineers-salary-reference-tooltip {
  position: relative;
  --tt-bubble-gap: 4px;
  --tt-pill-gap: 16px;
  --tt-rise: -12px;
}
.engineers-salary-reference-tooltip[data-tooltip]::before,
.engineers-salary-reference-tooltip[data-tooltip]::after {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  z-index: 60;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.engineers-salary-reference-tooltip[data-tooltip]::before {
  content: "";
  top: 50%;
  left: calc(100% + var(--tt-bubble-gap));
  width: 20px;
  height: 18px;
  background:
    radial-gradient(
      circle 4px at 4px 12px,
      rgb(var(--tooltip-bubble) / 0.92) 0,
      rgb(var(--tooltip-bubble) / 0.92) 60%,
      rgb(var(--tooltip-bubble) / 0.4) 64%,
      transparent 66%),
    radial-gradient(
      circle 3px at 11px 7px,
      rgb(var(--tooltip-bubble) / 0.86) 0,
      rgb(var(--tooltip-bubble) / 0.86) 60%,
      rgb(var(--tooltip-bubble) / 0.35) 64%,
      transparent 66%),
    radial-gradient(
      circle 2px at 17px 3px,
      rgb(var(--tooltip-bubble) / 0.78) 0,
      rgb(var(--tooltip-bubble) / 0.78) 60%,
      rgb(var(--tooltip-bubble) / 0.3) 64%,
      transparent 66%);
  filter: drop-shadow(0 6px 10px rgb(0 0 0 / 0.2));
  transform: translateY(-50%) translateX(-2px);
}
.engineers-salary-reference-tooltip[data-tooltip]::after {
  content: attr(data-tooltip);
  top: calc(50% + var(--tt-rise));
  left: calc(100% + var(--tt-pill-gap));
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--tooltip-grad);
  color: rgb(var(--tooltip-fg));
  border: 1px solid rgb(var(--tooltip-border) / 0.7);
  box-shadow: var(--tooltip-shadow), 0 0 0 1px rgb(var(--primary) / 0.08);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.2px;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transform: translateY(-50%) translateX(-2px);
}
.engineers-salary-reference-tooltip[data-tooltip]:hover::before,
.engineers-salary-reference-tooltip[data-tooltip]:focus-visible::before {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.engineers-salary-reference-tooltip[data-tooltip]:hover::after,
.engineers-salary-reference-tooltip[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.bg-app {
  position: relative;
  isolation: isolate;
  --app-shell-sidebar-width: var(--sideW-open);
  --app-shell-joint-radius: 16px;
  background-color: rgb(var(--bg0));
  background-image: var(--app-bg-gradient);
  background-repeat: no-repeat;
  background-size: cover;
  min-height: var(--full-height);
}
.bg-app.sidebar-collapsed {
  --app-shell-sidebar-width: var(--sideW-collapsed);
}
.bg-app > * {
  position: relative;
  z-index: 1;
}
.bg-app::before {
  content: none;
}
.bg-app::after {
  content: none;
}
.bg-bar {
  background: var(--app-shell-header-bg);
}
.text-muted {
  color: var(--app-color-text-muted);
}
header.bg-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: none;
  background: var(--app-shell-header-bg);
  box-shadow: none;
  overflow: visible;
  contain: layout style;
}
.hdr {
  height: var(--hdrH);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  gap: 10px;
  position: relative;
  overflow: visible;
}
.hdr-left {
  display: flex;
  align-items: flex-start;
  gap: 0;
}
.hdr-right {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: max-content;
}
header.bg-bar .hdr {
  display: grid;
  grid-template-columns: var(--app-shell-sidebar-width) minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  transition: grid-template-columns var(--app-shell-motion-duration) var(--app-shell-motion-ease);
}
header.bg-bar .hdr-left {
  position: relative;
  justify-content: flex-start;
  justify-self: start;
  align-self: start;
  height: 0;
  overflow: visible;
  padding: 0;
  pointer-events: none;
  transform: translateY(10px);
  z-index: 3;
  transition: transform var(--app-shell-motion-duration-fast) var(--app-shell-motion-ease), opacity var(--app-shell-motion-duration-fast) ease;
}
.brand-shell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: var(--app-shell-sidebar-width);
  min-height: 44px;
  min-width: 0;
  padding-inline: 18px 12px;
  pointer-events: auto;
  cursor: pointer;
  transition: min-height var(--app-shell-motion-duration-fast) var(--app-shell-motion-ease), transform var(--app-shell-motion-duration-fast) var(--app-shell-motion-ease);
}
.brand-shell:focus,
.brand-shell:focus-visible {
  outline: none;
  box-shadow: none;
}
.brand-hitbox {
  position: absolute;
  inset: 0 auto auto 0;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  border: 0;
  background: transparent;
}
.brand-toggle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--app-color-text-high);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.92);
  box-shadow: none;
  transition:
    opacity var(--app-shell-motion-duration-fast) ease,
    transform var(--app-shell-motion-duration-fast) var(--app-shell-motion-ease),
    background-color var(--app-shell-motion-duration-fast) ease;
}
.brand-toggle .bi,
.brand-toggle .sidebar-toggle-icon {
  font-size: 18px;
  line-height: 1;
}
.brand-toggle .sidebar-toggle-icon,
.sidebar-collapsed-brand__toggle .sidebar-toggle-icon {
  width: 18px;
  height: 18px;
  display: block;
}
.header-route-trail {
  position: absolute;
  inset-inline-start: calc(var(--app-shell-sidebar-width) + 16px);
  top: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  width: min(330px, calc(50vw - 270px));
  height: var(--hdrH);
  min-width: 0;
  gap: 7px;
  color: var(--app-color-text-muted);
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}
.header-route-trail__back {
  display: inline-grid;
  flex: 0 0 28px;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--app-shell-icon);
  cursor: pointer;
}
.header-route-trail__back:hover:not(:disabled),
.header-route-trail__back:focus-visible {
  color: var(--app-shell-icon-active);
  background: var(--app-shell-control-bg-hover);
  outline: none;
}
.header-route-trail__back:disabled {
  opacity: 0.35;
  cursor: default;
}
.header-route-trail__items {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header-route-trail__link,
.header-route-trail__current {
  overflow: hidden;
  text-overflow: ellipsis;
}
.header-route-trail__link {
  color: var(--app-color-text-muted);
  text-decoration: none;
}
.header-route-trail__link:hover,
.header-route-trail__link:focus-visible {
  color: var(--app-color-text-high);
  outline: none;
}
.header-route-trail__current {
  color: var(--app-color-text-high);
  font-weight: 700;
}
.header-route-trail__separator {
  flex: 0 0 auto;
  color: var(--app-color-text-quiet);
}
.brand-toggle:hover,
.brand-toggle:focus-visible {
  background: transparent;
  outline: none;
}
.bg-app:not(.sidebar-collapsed) .brand-toggle {
  display: none;
}
header.bg-bar .hdr-center {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  align-self: center;
  width: 100%;
  max-width: 500px;
  padding-inline: 10px;
  min-width: 0;
}
header.bg-bar .hdr-center .global-search-shell,
header.bg-bar .hdr-center .search {
  min-width: 0;
  width: clamp(300px, 36vw, 430px);
  max-width: 100%;
}
header.bg-bar .search {
  min-width: 0;
  height: var(--h-search);
  gap: 7px;
  padding: 0 13px;
  border-radius: 999px;
  border-color: var(--app-shell-control-border);
  font-size: 12.5px;
}
header.bg-bar .search:focus-within {
  border-color: var(--app-shell-accent-border-strong);
  background: color-mix(in oklab, var(--app-shell-control-bg) 90%, var(--app-color-text-high) 4%);
  transform: none;
}
header.bg-bar .search .bi,
header.bg-bar .search .header-search-icon {
  color: var(--app-shell-icon);
  width: 14px;
  height: 14px;
  display: block;
  flex: 0 0 auto;
}
header.bg-bar .search:focus-within .bi,
header.bg-bar .search:focus-within .header-search-icon {
  color: var(--app-shell-icon-active);
  animation: none;
}
header.bg-bar .hdr-right {
  justify-self: end;
  align-self: center;
  flex: 0 0 auto;
  justify-content: flex-end;
  --app-header-icon-size: 22px;
  --app-header-actions-gap: 5px;
  --app-header-right-gap: 10px;
  --app-header-toggle-width: 44px;
  --app-header-actions-width: calc( (var(--app-header-icon-size) * 3) + (var(--app-header-actions-gap) * 2) );
  min-width: calc(var(--app-header-actions-width) + var(--app-header-right-gap) + var(--app-header-toggle-width));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.16s ease, visibility 0s linear 0.16s;
  contain: layout style;
}
header.bg-bar .hdr-right.hdr-right--ready {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
header.bg-bar .search input {
  font-size: 12.5px;
  line-height: 1.15;
}
header.bg-bar .search-clear {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}
.brand-full,
.brand-mark {
  display: block;
  inline-size: auto;
  max-inline-size: none;
  block-size: auto;
  max-block-size: none;
  object-fit: contain;
  image-rendering: auto;
  flex: 0 0 auto;
}
.brand-full--light,
.brand-mark--light {
  display: none;
}
.brand-mark--dark,
.brand-mark--light {
  display: none;
}
html[data-theme=light] .brand-full--dark {
  display: block;
}
html:not([data-theme=light]) .brand-full--dark {
  display: none;
}
html:not([data-theme=light]) .brand-full--light {
  display: block;
}
.brand-full {
  inline-size: auto;
  max-inline-size: min(calc(var(--app-shell-sidebar-width) - 36px), 134px);
  block-size: 38px;
}
.brand-mark {
  display: none;
  inline-size: auto;
  max-inline-size: min(calc(var(--app-shell-sidebar-width) - 16px), 28px);
  block-size: 26px;
}
.bg-app.sidebar-collapsed header.bg-bar .hdr-left {
  transform: translate(-10px, 10px);
  opacity: 1;
  pointer-events: auto;
}
.bg-app.sidebar-collapsed header.bg-bar .hdr-left {
  min-height: 0;
}
.bg-app.sidebar-collapsed .brand-hitbox {
  width: var(--sideW-collapsed);
  height: 42px;
  pointer-events: auto;
  cursor: pointer;
}
.bg-app.sidebar-collapsed .brand-hitbox:focus-visible {
  outline: none;
}
.bg-app.sidebar-collapsed .brand-full--dark,
.bg-app.sidebar-collapsed .brand-full--light,
.bg-app.sidebar-collapsed .brand-full {
  display: none !important;
}
.bg-app.sidebar-collapsed .brand-lockup {
  display: none;
}
.bg-app.sidebar-collapsed .brand-mark--dark,
.bg-app.sidebar-collapsed .brand-mark--light,
.bg-app.sidebar-collapsed .brand-mark {
  display: none !important;
}
html[data-theme=light] .bg-app.sidebar-collapsed .brand-mark--dark,
html:not([data-theme=light]) .bg-app.sidebar-collapsed .brand-mark--light {
  display: block !important;
}
.bg-app.sidebar-collapsed .brand-shell {
  width: var(--sideW-collapsed);
  min-height: 42px;
  display: grid;
  place-items: center;
  margin-inline: auto;
  overflow: visible;
  padding-inline: 0;
}
.bg-app.sidebar-collapsed .brand-mark {
  inline-size: 30px;
  max-inline-size: 30px;
  block-size: 30px;
  object-fit: contain;
  opacity: 1;
  margin-inline: auto;
  transform: translateX(var(--app-collapsed-rail-offset, 0px));
  transition: opacity var(--app-shell-motion-duration-fast) ease, transform var(--app-shell-motion-duration-fast) var(--app-shell-motion-ease);
}
.bg-app.sidebar-collapsed .brand-toggle {
  width: 36px;
  height: 36px;
}
.bg-app.sidebar-collapsed .brand-shell:hover .brand-mark,
.bg-app.sidebar-collapsed .brand-shell:focus-within .brand-mark,
.bg-app.sidebar-collapsed.sidebar-collapsed-reveal .brand-mark {
  opacity: 0;
}
.bg-app.sidebar-collapsed .brand-shell:hover .brand-toggle,
.bg-app.sidebar-collapsed .brand-shell:focus-within .brand-toggle,
.bg-app.sidebar-collapsed.sidebar-collapsed-reveal .brand-toggle {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.sidebar-collapsed-brand {
  display: none !important;
}
.sidebar-brand-mark {
  display: none;
  inline-size: auto;
  max-inline-size: 26px;
  block-size: 30px;
  object-fit: contain;
  object-position: center;
  opacity: 1;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
html[data-theme=light] .sidebar-brand-mark--dark {
  display: block;
}
html:not([data-theme=light]) .sidebar-brand-mark--light {
  display: block;
}
.sidebar-collapsed-brand__toggle {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--app-shell-control-bg) 88%, var(--app-color-text-high) 5%);
  color: var(--app-color-text-high);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.92);
  transition:
    opacity 0.16s ease,
    transform 0.18s ease,
    background-color 0.18s ease;
}
.sidebar-collapsed-brand__toggle .bi,
.sidebar-collapsed-brand__toggle .sidebar-toggle-icon {
  font-size: 18px;
  line-height: 1;
}
.sidebar-collapsed-brand__toggle:hover,
.sidebar-collapsed-brand__toggle:focus-visible {
  background: color-mix(in oklab, var(--app-shell-control-bg) 82%, var(--app-color-text-high) 8%);
}
.sidebar.is-collapsed .sidebar-collapsed-brand {
  display: none !important;
}
@media (max-width: 640px) {
  .brand-full--dark,
  .brand-full--light {
    display: none;
  }
  html[data-theme=light] .brand-mark--dark,
  html:not([data-theme=light]) .brand-mark--light {
    display: block;
  }
}
.hdr-left {
  display: flex;
  align-items: flex-start;
  gap: 0;
  height: 0;
  min-width: 0;
  overflow: visible;
}
.search {
  height: var(--h-search);
  min-width: 265px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--app-shell-control-bg);
  border: var(--app-control-stroke);
  color: var(--app-shell-text);
  font-size: 12px;
  position: relative;
  isolation: isolate;
  transition:
    border-color 0.2s ease,
    box-shadow 0.25s ease,
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.search:focus-within {
  border-color: var(--app-shell-accent-border-strong);
  box-shadow: none;
  background: color-mix(in oklab, var(--app-shell-control-bg) 74%, var(--app-shell-accent-bg) 26%);
  transform: translateX(var(--app-collapsed-icon-nudge, 0px));
}
.search:focus-within .bi,
.search:focus-within .header-search-icon {
  color: var(--app-shell-icon-active);
  animation: search-pulse 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes search-pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}
.search input {
  border: none;
  background: transparent;
  width: 100%;
  outline: none;
  font-size: 12px;
  line-height: 1.1;
  color: var(--app-color-text-high);
}
.search input::placeholder {
  color: var(--app-color-placeholder);
}
.search input[type=search] {
  appearance: none;
  -webkit-appearance: none;
}
.search input[type=search]::-webkit-search-decoration,
.search input[type=search]::-webkit-search-cancel-button,
.search input[type=search]::-webkit-search-results-button,
.search input[type=search]::-webkit-search-results-decoration {
  appearance: none;
  -webkit-appearance: none;
  display: none;
}
.search input[type=search]::-ms-clear,
.search input[type=search]::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}
.search-clear {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--app-color-text-muted);
  opacity: 0.78;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    opacity 0.18s ease,
    transform 0.18s ease;
}
.search-clear:hover {
  background: var(--app-shell-accent-bg);
  color: var(--app-shell-accent-text);
  opacity: 1;
  transform: scale(1.04);
}
.search-clear .bi,
.search-clear .search-clear-icon {
  width: 12px;
  height: 12px;
  display: block;
}
.global-search-shell {
  position: relative;
  min-width: 0;
  display: flex;
  justify-content: center;
  width: 100%;
}
.global-search {
  min-width: 0;
  width: 100%;
  padding-right: 10px;
}
.global-search.is-open {
  border-color: var(--app-color-primary-border-strong);
  box-shadow: none;
}
.global-search-footer kbd {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.global-search-footer kbd {
  min-width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  padding: 0 6px;
  border-radius: 7px;
  border: var(--app-control-stroke);
  background: var(--app-color-surface);
  color: var(--app-color-text-high);
  font: 600 10px/1 "Segoe UI", sans-serif;
  box-shadow: none;
}
.global-search-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: calc(var(--z-dropdown) + 10);
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  border-radius: 12px;
  border: var(--app-card-stroke);
  background: var(--app-color-panel-body);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  max-height: min(430px, calc(100dvh - 110px));
  overflow: auto;
  scrollbar-gutter: stable;
  contain: layout style;
}
.global-search-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.global-search-section + .global-search-section {
  padding-top: 8px;
  border-top: var(--app-divider-stroke);
}
.global-search-section__header {
  padding: 2px 8px 0;
  color: var(--app-color-text-quiet);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.global-search-section__items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.global-search-option {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 0;
  padding: 9px 8px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: inherit;
  text-decoration: none;
  text-align: left;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background-color 0.18s ease,
    box-shadow 0.18s ease;
}
.global-search-option:hover,
.global-search-option:focus-visible,
.global-search-option.is-active {
  transform: none;
  border-color: transparent;
  background: var(--app-color-row-bg);
  box-shadow: none;
}
.global-search-option:focus-visible {
  outline: none;
}
.global-search-option.is-disabled {
  opacity: 0.78;
}
.global-search-option__icon {
  display: none;
}
.global-search-option__icon .bi {
  font-size: 16px;
}
.global-search-option__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.global-search-option__title,
.global-search-option__meta {
  min-width: 0;
  overflow: visible;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.global-search-option__title {
  color: var(--app-color-text-high);
  font-size: 13px;
  font-weight: 600;
}
.global-search-option__meta {
  color: var(--app-color-text-soft);
  font-size: 11px;
}
.global-search-option .match {
  color: var(--app-color-primary-text);
  font-weight: 700;
}
.global-search-option__state {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 18px;
  margin-top: 2px;
  padding: 0;
  border-radius: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 0;
}
.global-search-option__state {
  background: transparent;
  color: var(--app-color-warning-soft);
}
.global-search-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 12px;
  color: var(--app-color-text-muted);
}
.global-search-empty .bi,
.global-search-empty .global-search-empty-icon {
  width: 22px;
  height: 22px;
  display: block;
  color: var(--app-color-primary-text);
}
.global-search-empty__title {
  color: var(--app-color-text-high);
  font-size: 13px;
  font-weight: 700;
}
.global-search-empty__text {
  margin-top: 2px;
  font-size: 12px;
  color: var(--app-color-text-soft);
}
.global-search-footer {
  display: none;
}
.global-search-panel::-webkit-scrollbar {
  width: 10px;
}
.global-search-panel::-webkit-scrollbar-track {
  background: var(--app-color-panel-body);
}
.global-search-panel::-webkit-scrollbar-thumb {
  border: 2px solid var(--app-color-panel-body);
  border-radius: 999px;
  background: var(--app-color-outline-strong);
}
@media (max-width: 640px) {
  .global-search-option {
    grid-template-columns: minmax(0, 1fr);
  }
  .global-search-option__icon {
    display: none;
  }
  .global-search-footer {
    flex-wrap: wrap;
  }
}
.btn {
  height: 32px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgb(var(--border-strong));
  background: rgb(var(--surface));
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  z-index: auto;
  isolation: isolate;
  transition:
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.2s ease;
}
.btn:hover {
  background: rgba(var(--primary), 0.08);
  border-color: rgb(var(--primary) / 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(var(--primary), 0.12) inset;
}
.btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(var(--primary), 0.2) inset;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.btn.sm {
  height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12px;
}
header.bg-bar .hdr-icon {
  border: none;
  background: transparent;
  color: var(--app-shell-text);
  box-shadow: none;
  padding: 0;
  inline-size: 22px;
  block-size: 22px;
  flex: 0 0 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}
header.bg-bar .hdr-icon .bi,
header.bg-bar .hdr-icon .hdr-icon-svg {
  width: 14px;
  height: 14px;
  display: block;
  line-height: 1;
  color: var(--app-shell-icon);
  transition: transform 0.4s ease, color 0.18s ease;
}
header.bg-bar .hdr-icon:hover {
  background: var(--app-shell-control-bg-hover);
  border-color: transparent;
  box-shadow: none;
  transform: translateY(-1px);
}
header.bg-bar .hdr-icon:active {
  background: var(--app-shell-control-bg-active);
  border-color: transparent;
  transform: translateY(0) scale(0.98);
  box-shadow: none;
}
header.bg-bar .hdr-icon:focus-visible {
  outline: none;
  box-shadow: none;
  border-color: transparent;
}
.hdr-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  min-width: var(--app-header-actions-width);
  padding: 0;
  border-radius: 999px;
  border: none;
  background: transparent;
  flex: 0 0 var(--app-header-actions-width);
}
.theme-toggle-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-inline-start: 2px;
  min-width: var(--app-header-toggle-width, 44px);
  flex-shrink: 0;
  flex: 0 0 var(--app-header-toggle-width, 44px);
}
.hdr-actions .hdr-icon {
  border: none;
  background: transparent;
}
.hdr-actions .hdr-icon:hover {
  border-color: transparent;
}
.hdr-actions .hdr-icon:focus-visible {
  outline: none;
  box-shadow: none;
  border-color: transparent;
}
.notif-anchor {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 22px;
  flex: 0 0 22px;
}
header.bg-bar .hdr-icon:hover .header-settings-icon {
  transform: rotate(90deg);
}
header.bg-bar .hdr-icon:hover .header-bell-icon {
  animation: bell-wiggle 0.5s ease-in-out;
}
header.bg-bar .hdr-icon:hover .app-icon-host,
header.bg-bar .hdr-icon:active .app-icon-host,
header.bg-bar .hdr-icon:focus-visible .app-icon-host,
header.bg-bar .hdr-icon:hover .hdr-icon-svg,
header.bg-bar .hdr-icon:active .hdr-icon-svg,
header.bg-bar .hdr-icon:focus-visible .hdr-icon-svg {
  color: var(--app-shell-icon-active);
}
@keyframes bell-wiggle {
  0% {
    transform: rotate(0);
  }
  20% {
    transform: rotate(12deg);
  }
  40% {
    transform: rotate(-12deg);
  }
  60% {
    transform: rotate(8deg);
  }
  80% {
    transform: rotate(-8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.btn-accent {
  height: 32px;
  padding: 0 14px;
  border-radius: 10px;
  background:
    linear-gradient(
      135deg,
      rgba(var(--primary), 0.24) 0%,
      rgba(var(--primary), 0.18) 100%);
  border: 1px solid rgba(var(--primary), 0.5);
  color: rgb(224 255 244);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  transition:
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}
.btn-accent:hover {
  background:
    linear-gradient(
      135deg,
      rgba(var(--primary), 0.32) 0%,
      rgba(var(--primary), 0.24) 100%);
  border-color: rgba(var(--primary), 0.7);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(var(--primary), 0.28), 0 0 0 1px rgba(var(--primary), 0.3) inset;
  filter: brightness(1.05);
}
.btn-accent:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 2px 6px rgba(var(--primary), 0.2), 0 0 0 1px rgba(var(--primary), 0.4) inset;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.btn-accent.sm {
  height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12px;
}
@media (prefers-reduced-motion: reduce) {
  .fx-raise,
  .fx-sheen,
  .fx-ripple,
  .fx-gradient,
  .fx-pop,
  .fx-glow,
  .fx-uline,
  .fx-ripple-soft {
    transition: none !important;
    animation: none !important;
  }
}
:where(.btn, .tab, .icon).fx-raise {
  position: relative;
  transition:
    transform 0.08s ease,
    box-shadow 0.18s ease,
    filter 0.12s ease;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
:where(.btn, .tab, .icon).fx-raise:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28), 0 0 0 1px rgb(var(--primary) / 0.16) inset;
}
:where(.btn, .tab, .icon).fx-raise:active {
  transform: translateY(0);
  box-shadow: none;
}
:where(.btn, .tab).fx-sheen {
  position: relative;
  overflow: hidden;
}
:where(.btn, .tab).fx-sheen::after {
  content: "";
  position: absolute;
  inset: -2px;
  background:
    linear-gradient(
      100deg,
      transparent 35%,
      rgba(255, 255, 255, 0.22) 50%,
      transparent 65%);
  transform: translateX(-120%);
  pointer-events: none;
}
:where(.btn, .tab).fx-sheen:hover::after {
  animation: sheen-move 0.75s ease;
}
@keyframes sheen-move {
  from {
    transform: translateX(-120%);
  }
  to {
    transform: translateX(120%);
  }
}
:where(.btn, .tab).fx-gradient {
  background-image:
    linear-gradient(
      135deg,
      rgb(var(--primary) / 0.22),
      rgb(var(--primary) / 0.06));
  background-size: 200% 200%;
  transition: background-position 0.35s ease, filter 0.12s ease;
}
:where(.btn, .tab).fx-gradient:hover {
  background-position: 100% 0%;
}
:where(.btn, .tab).fx-gradient[data-pulse=true] {
  animation: cta-pulse 1.6s ease-in-out infinite;
}
@keyframes cta-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgb(0 0 0 / 0);
  }
  50% {
    box-shadow: 0 0 0 6px rgb(var(--primary) / 0.18);
  }
}
:where(.btn, .tab).fx-ripple {
  position: relative;
  overflow: hidden;
}
:where(.btn, .tab).fx-ripple::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  transform: translate(-50%, -50%) scale(0);
  background: rgb(var(--primary) / 0.45);
  filter: blur(2px);
}
:where(.btn, .tab).fx-ripple:active::before {
  animation: ripple 0.42s ease-out;
}
@keyframes ripple {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.9;
  }
  100% {
    transform: translate(-50%, -50%) scale(18);
    opacity: 0;
  }
}
:where(.btn, .tab, .icon).fx-pop {
  transition: transform 0.12s ease, filter 0.18s ease;
}
:where(.btn, .tab, .icon).fx-pop:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}
:where(.btn, .tab, .icon).fx-pop:active {
  transform: translateY(0) scale(0.985);
}
:where(.btn, .tab).fx-glow {
  transition: box-shadow 0.18s ease, outline-color 0.18s ease;
}
:where(.btn, .tab).fx-glow:hover {
  box-shadow: 0 8px 24px rgb(var(--primary) / 0.16), 0 0 0 1px rgb(var(--primary) / 0.28) inset;
}
:where(.btn, .tab).fx-glow:active {
  box-shadow: 0 4px 12px rgb(var(--primary) / 0.14), 0 0 0 1px rgb(var(--primary) / 0.34) inset;
}
:where(.tab, .btn).fx-uline {
  position: relative;
  overflow: hidden;
}
:where(.tab, .btn).fx-uline::after {
  content: "";
  position: absolute;
  left: 8px;
  right: calc(100% - 8px);
  bottom: 6px;
  height: 2px;
  background: rgb(var(--primary));
  border-radius: 2px;
  transition: right 0.22s ease;
}
:where(.tab, .btn).fx-uline:hover::after {
  right: 8px;
}
:where(.btn, .tab).fx-ripple-soft {
  position: relative;
  overflow: hidden;
}
:where(.btn, .tab).fx-ripple-soft {
  --rx: 50%;
  --ry: 50%;
}
:where(.btn, .tab).fx-ripple-soft:hover::before,
:where(.btn, .tab).fx-ripple-soft:focus-visible::before,
:where(.btn, .tab).fx-ripple-soft:active::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      120px 120px at var(--rx) var(--ry),
      rgb(var(--primary) / 0.18),
      transparent 60%);
  pointer-events: none;
  transition: opacity 0.28s ease;
  opacity: 1;
}
:where(.btn, .tab).fx-ripple-soft:not(:hover):not(:focus-visible)::before {
  opacity: 0;
}
.icon,
.btn-icon {
  inline-size: 30px;
  block-size: 30px;
  aspect-ratio: 1/1;
  border-radius: 8px;
  display: grid;
  place-items: center;
  line-height: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  transition:
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.15s ease,
    box-shadow 0.2s ease;
}
.icon:hover,
.btn-icon:hover {
  background: rgba(var(--primary), 0.08);
  transform: translateY(-2px) scale(1.08);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(var(--primary), 0.12) inset;
}
.icon:active,
.btn-icon:active {
  transform: translateY(0) scale(0.95);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.icon .ico,
.btn-icon .ico {
  display: block;
  font-size: 14px;
  line-height: 1;
  transform: translateY(-1px);
  font-family:
    "Segoe UI Emoji",
    "Apple Color Emoji",
    "Noto Color Emoji",
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.15s ease;
}
.icon:hover .ico,
.btn-icon:hover .ico {
  transform: translateY(-1px) scale(1.1) rotate(-5deg);
  color: rgb(var(--primary));
}
.bi {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}
.nav-item .bi {
  font-size: 20px;
  vertical-align: middle;
  width: 28px;
  display: grid;
  place-items: center;
  transition: none;
}
.menu-item .bi,
.menu-row .bi {
  font-size: 18px;
  vertical-align: middle;
  width: 26px;
  display: grid;
  place-items: center;
  transition: none;
}
.org-pill .bi {
  font-size: 22px;
  width: 26px;
  display: grid;
  place-items: center;
}
.account-pill .avatar .bi {
  font-size: 18px;
}
.menu-header .avatar .bi {
  font-size: 32px;
}
.search .bi {
  font-size: 18px;
}
.btn .bi {
  font-size: 18px;
}
.shell {
  height: var(--app-shell-height);
  min-height: 0;
  display: grid;
  grid-template-columns: var(--app-shell-sidebar-width) minmax(0, 1fr);
  overflow: visible;
  position: relative;
  z-index: auto;
  transition: grid-template-columns var(--app-shell-sidebar-motion-duration) var(--app-shell-motion-ease);
  contain: layout style;
}
.shell::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--app-shell-sidebar-width);
  width: var(--app-shell-joint-radius);
  height: var(--app-shell-joint-radius);
  background:
    radial-gradient(
      circle at 100% 100%,
      transparent calc(var(--app-shell-joint-radius) - 1px),
      var(--app-shell-header-bg) var(--app-shell-joint-radius)) top left / 100% 100% no-repeat;
  pointer-events: none;
  z-index: 1;
  transition: left var(--app-shell-sidebar-motion-duration) var(--app-shell-motion-ease);
}
.panel,
.card {
  border-radius: 18px;
  border: 1px solid rgb(var(--border));
  background: rgb(var(--surface));
  color: rgb(var(--fg));
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.18);
}
.sidebar {
  width: var(--sideW-open);
  transition: width var(--app-shell-motion-duration) var(--app-shell-motion-ease), background-color var(--app-shell-motion-duration-fast) ease;
  position: sticky;
  top: 0;
  height: 100%;
  min-height: 0;
  border-right: none;
  background: var(--app-shell-sidebar-bg);
  box-shadow: none;
  overflow: visible;
  contain: layout style;
  will-change: auto;
}
.bg-app.sidebar-transitioning .sidebar {
  will-change: width;
}
.bg-app.sidebar-transitioning header.bg-bar .hdr {
  will-change: grid-template-columns;
}
.bg-app.sidebar-transitioning .shell::before {
  will-change: left;
}
.sidebar.is-collapsed {
  width: var(--sideW-collapsed);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  cursor: pointer;
  --app-collapsed-item-size: 38px;
  --app-collapsed-item-width: var(--app-collapsed-item-size);
  --app-collapsed-item-radius: 12px;
  --app-collapsed-icon-nudge: 0px;
  --app-collapsed-rail-offset: 0px;
}
.bg-app.sidebar-transitioning .collapsed-area-flyout,
.bg-app.sidebar-transitioning .sidebar-floating-tooltip {
  opacity: 0;
  pointer-events: none;
}
.sidebar:not(.is-collapsed) {
  cursor: pointer;
}
.sidebar-inner {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: 0;
  transition: padding var(--app-shell-motion-duration-fast) var(--app-shell-motion-ease);
  contain: layout style paint;
}
.sidebar:not(.is-collapsed) .sidebar-inner,
.sidebar:not(.is-collapsed) .sidebar-bottom {
  cursor: pointer;
}
.sidebar.is-collapsed .sidebar-inner {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  padding-top: 0;
  align-items: center;
  cursor: pointer;
}
.sidebar-top {
  position: relative;
  padding: 6px 6px 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.sidebar-bottom {
  margin-top: auto;
  flex: 0 0 auto;
  padding: 8px 8px 12px;
  position: relative;
}
.sidebar.is-collapsed .sidebar-inner {
  padding-bottom: calc(var(--app-collapsed-item-size) + 20px);
}
.sidebar.is-collapsed .sidebar-bottom {
  position: fixed;
  inset-inline-start: 0;
  bottom: calc(10px + env(safe-area-inset-bottom));
  width: var(--sideW-collapsed);
  height: var(--app-collapsed-item-size);
  padding: 0;
  margin-top: 0;
  display: block;
  z-index: var(--z-sidebar);
  transform: none;
  cursor: pointer;
}
.sidebar.is-collapsed .area-trigger,
.sidebar.is-collapsed .area-page-item,
.sidebar.is-collapsed .account-pill,
.sidebar.is-collapsed .brand-hitbox,
.sidebar.is-collapsed .brand-toggle,
.sidebar.is-collapsed .areas-fly,
.sidebar.is-collapsed .menu-panel,
.sidebar.is-collapsed .workspace-panel {
  cursor: auto;
}
.sidebar.is-collapsed .sidebar-bottom .account-pill {
  margin: 0;
  position: absolute;
  inset-inline-start: 50%;
  top: 0;
  margin-inline-start: 0;
}
.org-pill {
  flex: 1;
  height: var(--h-org-pill);
  border: var(--app-control-stroke);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  background: var(--app-shell-control-bg);
  color: var(--app-shell-text);
  font-size: var(--fs-menu);
  cursor: pointer;
  position: relative;
  isolation: isolate;
  transition:
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.2s ease;
}
.org-pill:hover {
  background: var(--app-shell-control-bg-hover);
  border-color: var(--app-shell-control-border-hover);
  transform: translateY(-1px);
  box-shadow: none;
}
.org-pill .ico,
.org-pill .bi {
  width: 18px;
  display: grid;
  place-items: center;
  font-size: 16px;
  transition:
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    color 0.15s ease,
    filter 0.2s ease;
}
.org-pill:hover .ico {
  color: var(--app-shell-icon-active);
  transform: scale(1.08) rotate(-3deg);
  filter: brightness(1.1);
}
.org-pill .org-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}
.org-pill .org-name {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.org-pill:hover .org-name {
  transform: translateX(1px);
}
.org-pill .caret,
.account-pill .caret {
  margin-left: auto;
  font-size: 14px;
  opacity: 0.7;
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    color 0.15s ease,
    opacity 0.2s ease;
}
.sidebar-caret-icon {
  display: block;
}
.org-pill:hover .caret {
  opacity: 1;
}
.org-pill.open .caret {
  transform: rotate(180deg);
  color: var(--app-shell-icon-active);
}
.org-pill.is-colored .org-name,
.org-pill.is-colored .ico {
  color: var(--app-shell-accent-text);
}
.menu-panel {
  background: var(--app-shell-panel-bg);
  border: var(--app-card-stroke);
  border-radius: 14px;
  padding: 10px;
  z-index: 50;
  position: relative;
  isolation: isolate;
  box-shadow: var(--app-shell-panel-shadow);
  animation: menu-spring-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.workspace-panel {
  top: 48px;
}
.sidebar .workspace-panel {
  left: 8px;
  right: 8px;
}
.sidebar.is-collapsed .workspace-panel {
  left: calc(100% + 1px);
  right: auto;
  width: calc(var(--sideW-open) - 16px);
  top: 8px;
  margin-top: 0;
}
@keyframes menu-spring-in {
  0% {
    opacity: 0;
    transform: translateY(-12px) scale(0.92);
    filter: blur(2px);
  }
  50% {
    opacity: 0.8;
    filter: blur(0.5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
.menu-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 6px 10px;
}
.menu-header .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: var(--app-control-stroke);
  display: grid;
  place-items: center;
  background: var(--app-shell-control-bg);
  font-size: 22px;
}
.menu-divider {
  height: 1px;
  background: var(--app-color-divider);
  margin: 8px 0;
  border-radius: 1px;
}
.menu-divider.soft {
  background:
    linear-gradient(
      90deg,
      color-mix(in oklab, var(--app-color-divider) 0%, transparent),
      color-mix(in oklab, var(--app-color-divider) 72%, transparent),
      color-mix(in oklab, var(--app-color-divider) 0%, transparent));
  margin: 4px 0 8px;
}
.account-menu {
  position: fixed;
  padding: 7px;
  width: 244px;
  max-width: calc(100vw - 16px);
  z-index: var(--z-dropdown);
  overflow: hidden;
  background: var(--app-shell-panel-bg);
  border: var(--app-card-stroke);
  border-radius: 12px;
  box-shadow: var(--app-shell-panel-shadow);
  will-change: transform, opacity;
  transform-origin: 18% 90%;
  animation: account-menu-in 0.18s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.account-menu.animate-pop {
  animation: account-menu-in 0.18s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.account-menu__header {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 4px 4px 6px;
  border-bottom: var(--app-divider-stroke);
  animation: account-menu-fade 0.2s ease-out both;
  animation-delay: 0.03s;
}
.account-menu__header .avatar {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--app-shell-accent-border);
  background: var(--app-shell-accent-bg);
  color: var(--app-shell-accent-text);
  display: grid;
  place-items: center;
  font-size: 17px;
  position: relative;
  --status-dot-size: 6px;
}
.account-menu__meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  text-align: start;
}
.account-menu__meta .name {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1px;
  text-transform: none !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-menu__meta .email {
  font-size: 10px;
  color: var(--app-color-text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-pill .status-dot,
.account-menu .status-dot {
  position: absolute;
  inset-inline-end: -2px;
  inset-block-end: -2px;
  width: var(--status-dot-size, 10px);
  height: var(--status-dot-size, 10px);
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid transparent;
  box-shadow: 0 0 0 2px transparent, 0 0 8px rgba(34, 197, 94, 0.5);
}
.account-pill .status-dot {
  border-color: var(--app-shell-control-bg);
  box-shadow: 0 0 0 2px var(--app-shell-control-bg), 0 0 8px rgba(34, 197, 94, 0.5);
}
.account-menu .status-dot {
  border-color: var(--app-shell-panel-bg);
  box-shadow: 0 0 0 2px var(--app-shell-panel-bg), 0 0 8px rgba(34, 197, 94, 0.5);
}
.status-line {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--app-color-text-soft);
  text-transform: none;
}
.status-dot-inline {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 4px rgba(34, 197, 94, 0.5);
}
.account-menu__list {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 1px;
  border: 0;
  border-radius: 8px;
  background: transparent;
}
.account-menu__item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 5px 7px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  background-clip: padding-box;
  color: var(--app-color-text-high);
  text-decoration: none;
  text-align: start;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
  animation: account-menu-rise 0.22s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.account-menu__item:hover {
  background: var(--app-shell-control-bg-hover);
  border-color: var(--app-shell-control-border-hover);
  box-shadow: none;
}
.account-menu__item:focus-visible {
  outline: none;
  background: var(--app-shell-control-bg-hover);
  border-color: var(--app-shell-accent-border-strong);
  box-shadow: var(--app-shell-focus-ring);
}
.account-menu__list .account-menu__item:nth-child(1) {
  animation-delay: 0.06s;
}
.account-menu__list .account-menu__item:nth-child(2) {
  animation-delay: 0.09s;
}
.account-menu__list .account-menu__item:nth-child(3) {
  animation-delay: 0.12s;
}
.account-menu__footer .account-menu__item {
  animation-delay: 0.15s;
}
.account-menu__item .ico-wrap {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: var(--app-shell-accent-bg);
  border: 1px solid var(--app-shell-accent-border);
  color: var(--app-shell-accent-text);
  font-size: 12px;
  flex-shrink: 0;
}
.account-menu__item .item-text {
  flex: 1;
  min-width: 0;
  text-align: start;
}
.account-menu__item .item-text strong {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.12px;
  text-transform: none;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-menu__item .item-text small {
  display: block;
  font-size: 10px;
  color: var(--app-color-text-soft);
  text-transform: none;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-menu__item i[data-app-icon-token=chevron-right],
.account-menu__item i[data-app-icon-token=arrow-right-short] {
  margin-inline-start: auto;
  color: var(--app-color-text-muted);
  font-size: 13px;
}
.account-menu__footer {
  margin-top: 4px;
  padding: 1px;
  border: 0;
  border-radius: 8px;
  background: transparent;
}
.account-menu__item--danger {
  color: var(--app-color-danger-soft);
}
.account-menu__item--danger .ico-wrap {
  background: var(--app-color-danger-bg);
  border-color: var(--app-color-danger-border);
  color: var(--app-color-danger-soft);
}
.account-menu__item--danger small {
  color: var(--app-color-danger-soft);
}
.account-menu__item--danger i[data-app-icon-token=arrow-right-short] {
  color: var(--app-color-danger-soft);
}
.account-menu__item--danger:hover {
  background: var(--app-color-danger-bg);
  border-color: var(--app-color-danger-border);
}
@media (max-width: 520px) {
  .account-menu__meta .name {
    font-size: 13px;
  }
}
@keyframes account-menu-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes account-menu-fade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes account-menu-rise {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .account-menu,
  .account-menu__header,
  .account-menu__item {
    animation: none !important;
  }
}
.menu-item,
.menu-row {
  width: 100%;
  height: var(--h-menu-row);
  border-radius: 9px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 9px;
  font-size: var(--fs-menu);
  cursor: pointer;
  position: relative;
  isolation: isolate;
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.18s ease,
    box-shadow 0.22s ease,
    padding-left 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.menu-item:hover,
.menu-row:hover {
  background: var(--app-shell-accent-bg);
  transform: translateX(3px) scale(1.01);
  box-shadow: inset 2px 0 0 var(--app-shell-accent-border-strong);
}
.menu-row .ico,
.menu-item .ico,
.menu-row .bi,
.menu-item .bi {
  width: 20px;
  display: grid;
  place-items: center;
  font-size: var(--ico-menu);
  transition:
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    color 0.15s ease,
    filter 0.2s ease;
}
.menu-item:hover .ico,
.menu-row:hover .ico,
.menu-item:hover .bi,
.menu-row:hover .bi {
  color: var(--app-shell-icon-active) !important;
  transform: translateX(3px) scale(1.1);
  filter: none;
}
.menu-item .label,
.menu-row .label {
  transition:
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    color 0.15s ease,
    font-weight 0.2s ease;
}
.menu-item:hover .label,
.menu-row:hover .label {
  transform: translateX(2px);
  color: var(--app-shell-accent-text) !important;
  font-weight: 600;
}
.menu-item.danger {
  color: var(--app-color-danger-soft);
}
.menu-item.danger:hover {
  background: var(--app-color-danger-bg);
  color: var(--app-color-danger-soft);
  box-shadow: inset 2px 0 0 var(--app-color-danger-border);
}
.menu-row.active {
  background: var(--app-shell-accent-bg-strong);
  color: var(--app-shell-accent-text) !important;
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--app-shell-accent-border-strong);
  transform: translateX(2px);
}
.menu-row.active .ico,
.menu-row.active .bi {
  color: var(--app-shell-icon-active) !important;
  transform: translateX(2px) scale(1.08);
  filter: none;
}
.menu-row.active .label {
  color: var(--app-shell-accent-text) !important;
  transform: translateX(1px);
}
.areas-fly {
  position: absolute;
  left: calc(var(--sideW-collapsed) + 10px);
  top: 54px;
  width: 260px;
}
.sidebar.is-collapsed .areas-fly .menu-row .label {
  opacity: 1;
  transform: none;
  width: auto;
}
.nav-list--areas {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-top: 6px;
  padding-bottom: 10px;
  gap: 9px;
  transition:
    width var(--app-shell-motion-duration) var(--app-shell-motion-ease),
    padding var(--app-shell-motion-duration-fast) var(--app-shell-motion-ease),
    gap var(--app-shell-motion-duration-fast) var(--app-shell-motion-ease);
}
.nav-list--areas::before {
  display: none;
}
.area-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  transition: opacity var(--app-shell-motion-duration-fast) ease, transform var(--app-shell-motion-duration-fast) var(--app-shell-motion-ease);
}
.area-trigger {
  width: 100%;
  min-height: var(--h-org-pill);
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--app-color-text-high);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 11px;
  padding: 0 12px 0 10px;
  position: relative;
  z-index: 2;
  transition:
    background-color var(--app-shell-motion-duration-fast) ease,
    color var(--app-shell-motion-duration-fast) ease,
    box-shadow var(--app-shell-motion-duration-fast) ease,
    opacity var(--app-shell-motion-duration-fast) ease;
}
.area-section.is-expanded .area-trigger {
  border-color: transparent;
}
.area-trigger:hover {
  background: color-mix(in oklab, var(--app-shell-control-bg) 86%, var(--app-color-text-high) 6%);
  transform: none;
  box-shadow: none;
}
.area-trigger.is-current {
  background: var(--app-shell-nav-active-bg);
  color: var(--app-shell-nav-active-text);
  box-shadow: none;
}
.area-trigger.is-expanded:not(.is-current):not(.has-active-page) {
  color: var(--app-color-text-high);
  background: transparent;
  box-shadow: none;
}
.area-trigger.has-active-page {
  background: var(--app-shell-stage-context-bg);
  color: var(--app-shell-stage-context-text);
  box-shadow: none;
}
.area-trigger.has-active-page::before {
  content: none;
}
.area-trigger:hover .area-trigger__label,
.area-trigger.is-current .area-trigger__label {
  color: inherit;
}
.area-trigger__lead,
.area-trigger__tail {
  position: relative;
  z-index: 1;
}
.area-trigger.has-active-page .area-trigger__label,
.area-trigger.has-active-page .bi,
.area-trigger.has-active-page .sidebar-nav-icon,
.area-trigger.has-active-page .caret {
  color: inherit;
}
.area-trigger.has-active-page .area-trigger__label {
  font-weight: 600;
}
.area-trigger__lead {
  min-width: 0;
  min-height: 18px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex: 1 1 auto;
  max-width: 180px;
  overflow: hidden;
  transition: opacity var(--app-shell-motion-duration-fast) ease, transform var(--app-shell-motion-duration-fast) var(--app-shell-motion-ease);
}
.area-trigger__icon {
  width: 18px;
  min-width: 18px;
  height: 18px;
  display: block;
  transform: translateZ(0);
  transition: color var(--app-shell-motion-duration-fast) ease, opacity var(--app-shell-motion-duration-fast) ease;
}
.area-trigger__tail {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: auto;
  max-width: 24px;
  overflow: hidden;
  transition: opacity var(--app-shell-motion-duration-fast) ease, transform var(--app-shell-motion-duration-fast) var(--app-shell-motion-ease);
}
.area-trigger .bi,
.area-trigger .sidebar-nav-icon {
  width: 18px;
  display: grid;
  place-items: center;
  font-size: var(--ico-nav);
  color: var(--app-color-text-body);
  flex: 0 0 auto;
  transition:
    color var(--app-shell-motion-duration-fast) ease,
    transform var(--app-shell-motion-duration-fast) var(--app-shell-motion-ease),
    opacity var(--app-shell-motion-duration-fast) ease;
}
.area-trigger__label {
  min-width: 0;
  max-width: 140px;
  font-size: calc(var(--fs-nav) + 0.6px);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase !important;
  letter-spacing: 0.06em;
  transition:
    max-width var(--app-shell-motion-duration) var(--app-shell-motion-ease),
    color var(--app-shell-motion-duration-fast) ease,
    opacity var(--app-shell-motion-duration-fast) ease,
    transform var(--app-shell-motion-duration-fast) var(--app-shell-motion-ease);
}
.area-trigger .caret {
  font-size: 11px;
  color: var(--app-color-text-soft);
  transition:
    color var(--app-shell-motion-duration-fast) ease,
    opacity var(--app-shell-motion-duration-fast) ease,
    transform var(--app-shell-motion-duration-fast) var(--app-shell-motion-ease);
}
.area-trigger:hover .bi,
.area-trigger:hover .sidebar-nav-icon,
.area-trigger:hover .caret,
.area-trigger.is-expanded .caret,
.area-trigger.is-current .bi,
.area-trigger.is-current .sidebar-nav-icon,
.area-trigger.is-current .caret {
  color: var(--app-color-text-high);
}
.area-trigger.is-current .bi,
.area-trigger.is-current .sidebar-nav-icon,
.area-trigger.is-current .caret {
  color: var(--app-shell-nav-active-text);
}
.area-items {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-inline-start: 14px;
  padding: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition:
    max-height var(--app-shell-motion-duration) var(--app-shell-motion-ease),
    opacity var(--app-shell-motion-duration-fast) ease,
    transform var(--app-shell-motion-duration-fast) var(--app-shell-motion-ease),
    visibility 0s linear var(--app-shell-motion-duration-fast);
}
.area-items.is-open {
  max-height: 560px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  padding-top: 2px;
  transition:
    max-height var(--app-shell-motion-duration) var(--app-shell-motion-ease),
    opacity var(--app-shell-motion-duration-fast) ease,
    transform var(--app-shell-motion-duration-fast) var(--app-shell-motion-ease),
    visibility 0s linear 0s;
}
.area-items::before {
  content: none;
}
.area-page-item {
  width: 100%;
  min-height: var(--h-nav);
  height: var(--h-nav);
  border-radius: 9px;
  border: 0;
  background: transparent;
  color: var(--app-color-text-muted);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 12px;
  font-size: calc(var(--fs-nav) - 1.1px);
  position: relative;
  cursor: pointer;
  animation: none;
  box-shadow: none;
  transition:
    background-color var(--app-shell-motion-duration-fast) ease,
    color var(--app-shell-motion-duration-fast) ease,
    transform var(--app-shell-motion-duration-fast) var(--app-shell-motion-ease),
    opacity var(--app-shell-motion-duration-fast) ease;
}
.area-page-item .ico,
.area-page-item .bi,
.area-page-item .sidebar-nav-icon {
  width: 16px;
  font-size: 14px;
  color: currentColor;
  flex: 0 0 auto;
  display: block;
  transition:
    color var(--app-shell-motion-duration-fast) ease,
    transform var(--app-shell-motion-duration-fast) var(--app-shell-motion-ease),
    opacity var(--app-shell-motion-duration-fast) ease;
}
.area-page-item .label {
  color: currentColor;
  font-weight: 500;
  font-size: 11px;
  text-transform: none !important;
  letter-spacing: 0.01em;
  transition:
    color var(--app-shell-motion-duration-fast) ease,
    opacity var(--app-shell-motion-duration-fast) ease,
    transform var(--app-shell-motion-duration-fast) var(--app-shell-motion-ease);
}
.area-page-item::before {
  content: none;
}
.area-page-item:hover {
  background: color-mix(in oklab, var(--app-shell-control-bg) 88%, var(--app-color-text-high) 5%);
  color: var(--app-color-text-high);
  transform: none;
  box-shadow: none;
}
.area-page-item.active {
  background: transparent;
  color: var(--app-shell-nav-active-text);
  box-shadow: none;
  transform: none;
}
.area-page-item .label,
.area-page-item:hover .label {
  transform: none;
  font-weight: 500;
}
.area-page-item:hover .label {
  color: var(--app-color-text-high);
}
.area-page-item .ico,
.area-page-item .bi,
.area-page-item .sidebar-nav-icon,
.area-page-item:hover .ico,
.area-page-item:hover .bi,
.area-page-item:hover .sidebar-nav-icon,
.area-page-item.active .ico,
.area-page-item.active .bi,
.area-page-item.active .sidebar-nav-icon {
  transform: none;
  filter: none;
}
.area-page-item.active .label {
  color: currentColor !important;
  font-weight: 600;
}
.area-page-item.active .ico,
.area-page-item.active .bi,
.area-page-item.active .sidebar-nav-icon {
  color: currentColor !important;
}
.area-page-item.is-disabled {
  opacity: 0.58;
}
.area-page-item .nav-item-status {
  margin-inline-start: auto;
  padding: 1px 5px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--app-shell-control-bg) 88%, transparent);
  color: var(--app-color-text-muted);
  border: 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.collapsed-area-flyout {
  position: fixed !important;
  z-index: 1800 !important;
  display: flex;
  flex-direction: column;
  width: min(238px, calc(100vw - 24px));
  min-width: min(238px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  padding: 8px;
  border-radius: 16px;
  background: var(--app-shell-subpanel-bg);
  border: var(--app-shell-subpanel-border);
  box-shadow: none;
  overflow: hidden;
  box-sizing: border-box;
}
.collapsed-area-flyout::before {
  content: none;
}
.collapsed-area-flyout__header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 8px;
  margin-bottom: 4px;
  border-bottom: var(--app-shell-subpanel-divider);
}
.collapsed-area-flyout__title {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--app-shell-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.shell-primary-item {
  margin-bottom: 2px;
}
.collapsed-area-flyout__area-icon {
  flex: 0 0 auto;
  color: var(--app-shell-icon);
}
.collapsed-area-flyout__list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  min-height: 0;
  padding-right: 2px;
}
.collapsed-area-flyout__item {
  width: 100%;
  min-height: 37px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--app-shell-text);
  text-decoration: none;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease;
}
.collapsed-area-flyout__item:hover {
  background: var(--app-shell-subpanel-item-hover-bg);
  color: var(--app-shell-text);
}
.collapsed-area-flyout__item.active {
  background: transparent;
  color: var(--app-shell-nav-active-text);
  box-shadow: none;
}
.collapsed-area-flyout__item.is-disabled {
  opacity: 0.6;
}
.collapsed-area-flyout__item-icon {
  flex: 0 0 auto;
  width: 18px;
  min-width: 18px;
  height: 18px;
  color: var(--app-color-text-high);
  opacity: 1;
  position: relative;
  z-index: 1;
  filter: none;
  overflow: visible;
}
.collapsed-area-flyout__item hugeicons-icon,
.collapsed-area-flyout__item .collapsed-area-flyout__item-icon {
  color: var(--app-color-text-high);
}
.collapsed-area-flyout__item hugeicons-icon svg,
.collapsed-area-flyout__item .collapsed-area-flyout__item-icon {
  display: block;
  overflow: visible;
}
.collapsed-area-flyout__item hugeicons-icon svg path[stroke],
.collapsed-area-flyout__item .collapsed-area-flyout__item-icon path[stroke] {
  stroke: currentColor !important;
  stroke-width: 2.25 !important;
  opacity: 1 !important;
}
.collapsed-area-flyout__item hugeicons-icon svg path[fill]:not([fill=none]),
.collapsed-area-flyout__item .collapsed-area-flyout__item-icon path[fill]:not([fill=none]) {
  fill: currentColor !important;
  opacity: 1 !important;
}
.collapsed-area-flyout__item:hover .collapsed-area-flyout__item-icon,
.collapsed-area-flyout__item.active .collapsed-area-flyout__item-icon {
  color: currentColor;
}
.collapsed-area-flyout__item-label {
  display: block;
  min-width: 0;
  color: currentColor;
  position: relative;
  z-index: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  opacity: 1;
  width: auto;
}
.collapsed-area-flyout__item-status {
  margin-inline-start: auto;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--app-shell-control-bg);
  color: var(--app-shell-text-muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
@keyframes area-panel-in {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.nav-list {
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
  position: relative;
}
.nav-list {
  --indicator-top: 0px;
}
.nav-list::before {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: var(--indicator-top, 0);
  height: var(--h-nav);
  background: var(--app-shell-accent-bg-strong);
  border-radius: 10px;
  opacity: 1;
  pointer-events: none;
  z-index: 1;
  transition:
    top var(--app-shell-motion-duration) var(--app-shell-motion-ease),
    opacity var(--app-shell-motion-duration-fast) ease,
    transform var(--app-shell-motion-duration) var(--app-shell-motion-ease),
    box-shadow var(--app-shell-motion-duration-fast) ease;
  box-shadow: -4px 0 0 0 rgb(var(--primary)) inset, 0 4px 12px rgba(var(--primary), 0.2);
  will-change: top, transform;
}
.nav-list:not(:has(.nav-item.active))::before {
  opacity: 0;
}
.nav-list.indicator-flowing::before {
  transform: scaleY(1.02);
  box-shadow: -3px 0 0 0 rgb(var(--primary)) inset;
}
.nav-list::-webkit-scrollbar {
  width: 6px;
}
.sidebar.is-collapsed .nav-list::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.sidebar.is-collapsed .nav-list {
  overflow-y: auto;
  overflow-x: hidden;
}
.nav-item {
  height: var(--h-nav);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  color: var(--app-color-text-body);
  background: transparent;
  font-size: var(--fs-nav);
  position: relative;
  isolation: isolate;
  cursor: pointer;
  z-index: 2;
  transition:
    background-color var(--app-shell-motion-duration-fast) ease,
    color var(--app-shell-motion-duration-fast) ease,
    box-shadow var(--app-shell-motion-duration-fast) ease,
    opacity var(--app-shell-motion-duration-fast) ease;
}
.sidebar button:focus,
.sidebar button:focus-visible {
  outline: none;
  outline-offset: 0;
}
.nav-item:hover {
  background: color-mix(in oklab, var(--app-shell-control-bg) 88%, var(--app-color-text-high) 6%);
  color: var(--app-color-text-high);
  transform: none;
  box-shadow: none;
}
.nav-item.is-disabled {
  opacity: 0.62;
  cursor: not-allowed;
}
.nav-item.is-disabled:hover {
  background: var(--app-shell-control-bg);
  transform: none;
  box-shadow: none;
}
.nav-item .ico,
.nav-item .bi,
.nav-item .sidebar-nav-icon {
  width: 20px;
  display: grid;
  place-items: center;
  font-size: var(--ico-nav);
  transition: color var(--app-shell-motion-duration-fast) ease, opacity var(--app-shell-motion-duration-fast) ease;
}
.nav-item:hover .ico,
.nav-item:hover .bi,
.nav-item:hover .sidebar-nav-icon {
  color: currentColor !important;
  transform: none;
}
.nav-item.is-disabled:hover .ico,
.nav-item.is-disabled:hover .bi,
.nav-item.is-disabled:hover .sidebar-nav-icon {
  color: var(--app-color-text-muted) !important;
  transform: none;
}
.nav-item .label {
  transition:
    color var(--app-shell-motion-duration-fast) ease,
    font-weight var(--app-shell-motion-duration-fast) ease,
    opacity var(--app-shell-motion-duration-fast) ease;
}
.nav-item:hover .label {
  transform: none;
  color: currentColor !important;
  font-weight: 600;
}
.nav-item.is-disabled:hover .label {
  transform: none;
  color: var(--app-color-text-muted) !important;
  font-weight: 500;
}
.nav-item-status {
  margin-inline-start: auto;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--app-shell-control-bg);
  color: var(--app-color-text-muted);
  border: var(--app-control-stroke);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.nav-item.active {
  background: transparent;
  transform: none;
}
.nav-item.active .label {
  color: var(--app-shell-accent-text) !important;
  font-weight: 650;
  transform: none;
}
.nav-item.active .ico,
.nav-item.active .bi,
.nav-item.active .sidebar-nav-icon {
  color: currentColor !important;
}
.nav-item.active {
  transition:
    background-color var(--app-shell-motion-duration-fast) ease,
    color var(--app-shell-motion-duration-fast) ease,
    transform var(--app-shell-motion-duration-fast) var(--app-shell-motion-ease);
}
.account-wrap {
  margin-top: auto;
  padding: 6px 7px 10px;
  position: relative;
}
.account-pill {
  width: calc(100% - 4px);
  margin: 0 auto;
  min-height: var(--h-account);
  border-radius: 11px;
  border: var(--app-control-stroke);
  background: var(--app-shell-control-bg);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 10px;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.25s ease,
    opacity var(--app-shell-motion-duration-fast) ease;
}
.account-pill:hover {
  background: var(--app-shell-control-bg-hover);
  border-color: var(--app-shell-control-border-hover);
  transform: translateY(-1px);
  box-shadow: none;
}
.account-pill .avatar {
  width: 30px;
  height: 30px;
  border-radius: 0;
  border: 0;
  display: grid;
  place-items: center;
  font-size: 15px;
  background: transparent;
  color: var(--app-shell-accent-text);
  position: relative;
  --status-dot-size: 7px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}
.account-pill .avatar .sidebar-account-icon {
  width: 18px;
  height: 18px;
  display: block;
}
.account-menu__header .avatar .account-menu-user-icon {
  width: 18px;
  height: 18px;
  display: block;
}
.account-pill:hover .avatar {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.account-pill .meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  text-align: start;
}
.account-pill .meta .name {
  font-weight: 700;
  font-size: var(--fs-acc-name);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s ease;
  text-transform: none !important;
}
.account-pill:hover .meta .name {
  color: var(--app-shell-accent-text);
}
.account-pill .meta .email {
  font-size: var(--fs-acc-email);
  color: var(--app-color-text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar.is-collapsed .org-name,
.sidebar.is-collapsed .menu-row .label,
.sidebar.is-collapsed .area-page-item .label,
.sidebar.is-collapsed .nav-item .label {
  display: none !important;
  opacity: 0;
  transform: none;
  width: 0;
  min-width: 0;
  margin: 0;
  pointer-events: none;
  transition: none;
}
.sidebar.is-collapsed .account-pill .meta {
  opacity: 0;
  transform: translateX(-6px);
  pointer-events: none;
}
.sidebar:not(.is-collapsed) .account-pill .meta {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.sidebar.is-collapsed .org-pill {
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 4px;
  width: calc(var(--sideW-collapsed) - 10px);
  min-width: calc(var(--sideW-collapsed) - 10px);
  padding: 4px;
  margin: 0 auto;
}
.sidebar.is-collapsed .org-pill .ico,
.sidebar.is-collapsed .org-pill .bi {
  width: auto;
  margin: 0;
}
.sidebar.is-collapsed .org-pill .caret {
  margin: 0;
  opacity: 0.85;
}
.sidebar.is-collapsed .nav-list--areas {
  width: 100%;
  max-width: 100%;
  padding-top: 0;
  padding-bottom: 0;
  padding-inline: 0;
  padding-right: 0;
  scrollbar-gutter: auto;
  gap: 8px;
  align-items: stretch;
  justify-content: center;
  align-content: center;
  margin: 0 auto;
}
.sidebar.is-collapsed .area-section {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: static;
}
.sidebar.is-collapsed .nav-list {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  align-items: center;
  justify-content: center;
  transform: none;
}
.sidebar.is-collapsed .area-trigger {
  width: var(--app-collapsed-item-size);
  min-width: var(--app-collapsed-item-size);
  min-height: var(--app-collapsed-item-size);
  height: var(--app-collapsed-item-size);
  padding: 0;
  margin: 0;
  margin-inline: auto;
  display: grid;
  place-items: center;
  border-radius: var(--app-collapsed-item-radius);
  background: transparent;
  color: var(--app-color-text-body);
  box-shadow: none;
  position: relative;
  inset-inline-start: auto;
  transform: none;
}
.sidebar.is-collapsed .area-trigger:hover {
  background: color-mix(in oklab, var(--app-shell-control-bg) 88%, var(--app-color-text-high) 6%);
  color: var(--app-color-text-high);
  transform: none;
}
.sidebar.is-collapsed .area-trigger.is-current {
  background: var(--app-shell-nav-active-bg);
  color: var(--app-shell-nav-active-text);
  box-shadow: none;
  transform: none;
}
.sidebar.is-collapsed .area-trigger.is-flyout-open:not(.is-current):not(.has-active-page) {
  background: transparent;
  color: var(--app-color-text-high);
  box-shadow: none;
}
.sidebar.is-collapsed .area-trigger.is-expanded:not(.is-current):not(.has-active-page) {
  background: transparent;
  color: var(--app-color-text-high);
  transform: none;
  box-shadow: none;
}
.sidebar.is-collapsed .area-trigger.has-active-page {
  background: var(--app-shell-stage-context-bg);
  color: var(--app-shell-stage-context-text);
  box-shadow: none;
  transform: none;
}
.sidebar.is-collapsed .area-trigger.has-active-page::before {
  content: none;
}
.sidebar.is-collapsed .area-trigger .bi {
  width: 20px;
  min-width: 20px;
  height: 20px;
  font-size: 18px;
  line-height: 1;
  margin: 0;
  display: block;
  text-align: center;
  position: absolute;
  inset: 0;
  margin: auto;
  justify-self: auto;
  align-self: auto;
  transform: translateX(1px) !important;
  color: currentColor !important;
  opacity: 1 !important;
  z-index: 1;
}
.sidebar.is-collapsed .area-trigger .caret {
  opacity: 0;
  transform: translateX(-4px);
}
.sidebar.is-collapsed .area-trigger hugeicons-icon.sidebar-nav-icon svg {
  display: block;
  overflow: visible;
}
.sidebar.is-collapsed .area-trigger .sidebar-nav-icon path[stroke] {
  stroke: currentColor !important;
  opacity: 1 !important;
}
.sidebar.is-collapsed .area-trigger .sidebar-nav-icon path[fill]:not([fill=none]) {
  fill: currentColor !important;
  opacity: 1 !important;
}
.sidebar.is-collapsed .nav-item {
  width: var(--app-collapsed-item-size);
  min-width: var(--app-collapsed-item-size);
  min-height: var(--app-collapsed-item-size);
  height: var(--app-collapsed-item-size);
  justify-content: center;
  padding: 0;
  gap: 0;
  margin: 0;
  margin-inline: auto;
  border-radius: var(--app-collapsed-item-radius);
  align-items: center;
  position: relative;
  inset-inline-start: auto;
}
.sidebar.is-collapsed .area-page-item {
  width: var(--app-collapsed-item-size);
  min-width: var(--app-collapsed-item-size);
  min-height: var(--app-collapsed-item-size);
  height: var(--app-collapsed-item-size);
  justify-content: center;
  align-items: center;
  padding: 0;
  gap: 0;
  margin: 0;
  margin-inline: auto;
  border-radius: var(--app-collapsed-item-radius);
  position: relative;
  inset-inline-start: auto;
}
.sidebar.is-collapsed .nav-item-status {
  display: none;
}
.sidebar.is-collapsed .area-page-item .nav-item-status {
  display: none;
}
.sidebar.is-collapsed .area-page-item .ico,
.sidebar.is-collapsed .area-page-item .bi,
.sidebar.is-collapsed .area-page-item .sidebar-nav-icon,
.sidebar.is-collapsed .nav-item .ico,
.sidebar.is-collapsed .nav-item .bi,
.sidebar.is-collapsed .nav-item .sidebar-nav-icon {
  width: 20px;
  min-width: 20px;
  height: 20px;
  font-size: 18px;
  line-height: 1;
  margin: 0;
  display: block;
  justify-self: center;
  align-self: center;
  position: absolute;
  inset: 0;
  margin: auto;
  transform: none !important;
}
.sidebar.is-collapsed .area-page-item:hover,
.sidebar.is-collapsed .nav-item:hover {
  transform: none;
  background: color-mix(in oklab, var(--app-shell-control-bg) 88%, var(--app-color-text-high) 6%);
}
.sidebar.is-collapsed .area-page-item.active,
.sidebar.is-collapsed .nav-item.active {
  transform: none;
  background: transparent;
  color: var(--app-shell-nav-active-text);
  box-shadow: none;
}
.sidebar.is-collapsed .area-page-item.active .ico,
.sidebar.is-collapsed .area-page-item.active .bi,
.sidebar.is-collapsed .area-page-item.active .sidebar-nav-icon,
.sidebar.is-collapsed .nav-item.active .ico,
.sidebar.is-collapsed .nav-item.active .bi,
.sidebar.is-collapsed .nav-item.active .sidebar-nav-icon {
  transform: none !important;
}
.sidebar.is-collapsed [data-tooltip] {
  position: relative;
}
.sidebar.is-collapsed [data-tooltip]::before,
.sidebar.is-collapsed [data-tooltip]::after {
  position: absolute;
  top: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 60;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.sidebar.is-collapsed [data-tooltip]::before {
  content: "";
  left: calc(50% + 2px);
  width: 14px;
  height: 14px;
  background:
    radial-gradient(
      circle 3px at 3px 11px,
      rgb(var(--tooltip-bubble) / 0.92) 0,
      rgb(var(--tooltip-bubble) / 0.92) 60%,
      rgb(var(--tooltip-bubble) / 0.4) 64%,
      transparent 66%),
    radial-gradient(
      circle 2.4px at 8px 7px,
      rgb(var(--tooltip-bubble) / 0.86) 0,
      rgb(var(--tooltip-bubble) / 0.86) 60%,
      rgb(var(--tooltip-bubble) / 0.35) 64%,
      transparent 66%),
    radial-gradient(
      circle 1.8px at 12px 3px,
      rgb(var(--tooltip-bubble) / 0.78) 0,
      rgb(var(--tooltip-bubble) / 0.78) 60%,
      rgb(var(--tooltip-bubble) / 0.3) 64%,
      transparent 66%);
  filter: drop-shadow(0 6px 10px rgb(0 0 0 / 0.2));
  transform: translateY(-50%);
  z-index: 59;
}
.sidebar.is-collapsed [data-tooltip]::after {
  content: attr(data-tooltip);
  left: calc(50% + 14px);
  top: calc(50% - 12px);
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--tooltip-grad);
  color: rgb(var(--tooltip-fg));
  border: 1px solid rgb(var(--tooltip-border) / 0.7);
  box-shadow: var(--tooltip-shadow), 0 0 0 1px rgb(var(--primary) / 0.08);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.2px;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transform: translateY(-50%);
  z-index: 60;
}
.sidebar.is-collapsed [data-tooltip]:hover::before,
.sidebar.is-collapsed [data-tooltip]:focus-visible::before {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.sidebar.is-collapsed [data-tooltip]:hover::after,
.sidebar.is-collapsed [data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.sidebar.is-collapsed [data-tooltip]::before,
.sidebar.is-collapsed [data-tooltip]::after {
  content: none;
}
.sidebar-floating-tooltip {
  position: fixed;
  width: 0;
  height: 0;
  z-index: 2000;
  pointer-events: none;
  --tt-dot: 6px;
  --tt-gap: 8px;
}
.sidebar-floating-tooltip::before,
.sidebar-floating-tooltip::after {
  position: absolute;
  top: 0;
  opacity: 1;
  pointer-events: none;
}
.sidebar-floating-tooltip::before {
  content: "";
  left: 0;
  width: var(--tt-dot);
  height: var(--tt-dot);
  border-radius: 999px;
  background: var(--app-shell-accent-text);
  box-shadow: none;
  transform: translateY(-50%);
  z-index: 59;
}
.sidebar-floating-tooltip::after {
  content: attr(data-tooltip);
  left: calc(var(--tt-dot) + var(--tt-gap));
  padding: 7px 13px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--app-shell-control-bg) 96%, black 4%);
  color: var(--app-color-text-high);
  border: var(--app-control-stroke);
  box-shadow: none;
  font-size: 12px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: translateY(-50%);
  z-index: 60;
}
.sidebar.is-collapsed .menu-row {
  justify-content: center;
  padding: 0;
  gap: 0;
}
.sidebar.is-collapsed .menu-row .ico {
  margin: 0;
}
.sidebar.is-collapsed .menu-panel .menu-row {
  justify-content: flex-start;
  padding: 0 10px;
  gap: 10px;
}
.sidebar.is-collapsed .menu-panel .menu-row .label {
  opacity: 1;
  transform: none;
  width: auto;
  pointer-events: auto;
}
.sidebar.is-collapsed .account-pill {
  min-height: 0;
  height: var(--app-collapsed-item-size);
  width: var(--app-collapsed-item-size);
  border-radius: var(--app-collapsed-item-radius);
  padding: 0;
  border: 0;
  background: transparent;
  display: grid;
  place-items: center;
  margin: 0;
  overflow: hidden;
  color: var(--app-color-text-body);
  box-shadow: none;
  transform: translateX(-50%);
}
.sidebar.is-collapsed .account-pill:hover {
  background: color-mix(in oklab, var(--app-shell-control-bg) 88%, var(--app-color-text-high) 6%);
  transform: translateX(-50%);
  box-shadow: none;
}
.sidebar.is-collapsed .account-pill .avatar {
  width: 20px;
  height: 20px;
  font-size: 18px;
  border-radius: 0;
  border: 0;
  background: transparent;
  color: currentColor;
  --status-dot-size: 0;
  margin: 0 auto;
  box-shadow: none;
  transform: none;
}
.sidebar.is-collapsed .account-pill .avatar .sidebar-account-icon {
  width: 18px;
  height: 18px;
  display: block;
  margin: 0 auto;
  transform: translateX(var(--app-collapsed-rail-offset, 0px));
}
.sidebar.is-collapsed .account-pill:hover .avatar {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.sidebar.is-collapsed .account-pill .status-dot {
  display: none;
}
.sidebar.is-collapsed .account-pill .caret {
  margin: 0;
  opacity: 0.85;
}
.sidebar.is-collapsed .account-pill .meta,
.sidebar.is-collapsed .account-pill .caret {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  flex: 0 0 0 !important;
}
.sidebar.is-collapsed .org-pill .caret,
.sidebar.is-collapsed .account-pill .caret {
  display: none;
}
.side-fab {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 5;
  pointer-events: auto;
  width: var(--fab);
  height: var(--fab);
  background: transparent;
  border: none;
  color: var(--app-color-text-high);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  cursor: pointer;
  transition: color var(--app-shell-motion-duration-fast) ease, opacity var(--app-shell-motion-duration-fast) ease;
}
.sidebar.is-collapsed .side-fab {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.86);
}
.side-fab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 24px;
  font-weight: 600;
  -webkit-text-stroke: 0.5px currentColor;
  transition: none;
}
.side-fab-icon .sidebar-fab-icon-svg {
  width: 18px;
  height: 18px;
  display: block;
  transform: none;
}
.side-fab:hover {
  color: var(--app-color-text-high);
  transform: none;
}
.side-fab:hover .side-fab-icon {
  transform: none;
}
.side-fab:active {
  transform: none;
  opacity: 0.84;
}
.side-fab:active .side-fab-icon {
  transform: none;
}
.content {
  position: relative;
  height: 100%;
  overflow: auto;
  min-width: 0;
  padding: 8px 8px 0 8px;
  border-inline-start: var(--app-shell-divider-stroke);
  border-block-start: var(--app-shell-divider-stroke);
  border-start-start-radius: var(--app-shell-joint-radius);
  background: var(--app-color-canvas);
  background-clip: padding-box;
  transition: border-radius var(--app-shell-motion-duration) var(--app-shell-motion-ease), border-color var(--app-shell-motion-duration-fast) ease;
}
body.submit-report-page main.content,
body.submit-report-page .content {
  padding: 0 !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: var(--app-shell-height);
  height: var(--app-shell-height);
  overflow: hidden;
}
body.dashboard-page main.content,
body.dashboard-page .content {
  padding: 0 !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: var(--app-shell-height);
  height: var(--app-shell-height);
  overflow: hidden;
  overflow-x: hidden !important;
}
body.dashboard-page main.content > router-outlet,
body.dashboard-page .content > router-outlet {
  display: none !important;
  flex: 0 0 0 !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
body.dashboard-page main.content > feature-dashboard-page,
body.dashboard-page .content > feature-dashboard-page,
body.dashboard-page main.content > router-outlet + feature-dashboard-page,
body.dashboard-page .content > router-outlet + feature-dashboard-page {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}
body.dashboard-page engineers-salary-reference-page-design.salary-dashboard-design,
body.dashboard-page feature-dashboard-page engineers-salary-reference-page-design.salary-dashboard-design {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}
body.dashboard-page engineers-salary-reference-page-design.salary-dashboard-design .table-area,
body.dashboard-page feature-dashboard-page engineers-salary-reference-page-design.salary-dashboard-design .table-area {
  position: relative !important;
  display: flex !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}
body.dashboard-page feature-dashboard-page .market-dashboard {
  inset: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  overflow-y: scroll !important;
  scrollbar-gutter: stable !important;
}
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--app-color-text-high);
}
.brand-lockup__mark {
  display: block;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
}
.brand-lockup__copy {
  display: grid;
  gap: 1px;
  min-width: 0;
  line-height: 1;
  text-transform: uppercase;
}
.brand-lockup__copy strong {
  color: var(--app-color-text-high);
  font-size: 11.5px;
  font-weight: 780;
  letter-spacing: 0.075em;
  white-space: nowrap;
}
.brand-lockup__copy span {
  color: var(--app-color-primary-text);
  font-size: 7.5px;
  font-weight: 720;
  letter-spacing: 0.16em;
  white-space: nowrap;
}
body.submit-report-page main.content > router-outlet,
body.submit-report-page .content > router-outlet {
  display: none !important;
  flex: 0 0 0 !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
body.submit-report-page main.content > feature-submit-salary-report-page,
body.submit-report-page .content > feature-submit-salary-report-page,
body.submit-report-page main.content > router-outlet + feature-submit-salary-report-page,
body.submit-report-page .content > router-outlet + feature-submit-salary-report-page {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
body.tender-projects-page main.content,
body.tender-projects-page .content,
body.tender-suppliers-page main.content,
body.tender-suppliers-page .content,
body.tender-material-classification-page main.content,
body.tender-material-classification-page .content,
main.content:has(feature-material-classification-page),
.content:has(feature-material-classification-page),
body.tender-pricing-page main.content,
body.tender-pricing-page .content,
body.tender-boq-page main.content,
body.tender-boq-page .content,
body.crm-grid-list-page main.content,
body.crm-grid-list-page .content {
  padding: 0 !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
body.tender-projects-page main.content,
body.tender-projects-page .content,
body.tender-boq-page main.content,
body.tender-boq-page .content,
body.tender-material-classification-page main.content,
body.tender-material-classification-page .content,
main.content:has(feature-material-classification-page),
.content:has(feature-material-classification-page),
body.crm-grid-list-page main.content,
body.crm-grid-list-page .content {
  padding: 0 !important;
}
body.tender-suppliers-page main.content,
body.tender-suppliers-page .content,
body.no-page-scroll.tender-suppliers-page main.content,
body.no-page-scroll.tender-suppliers-page .content {
  padding: 0 !important;
}
body.tender-boq-page main.content,
body.tender-boq-page .content,
body.no-page-scroll.tender-boq-page main.content,
body.no-page-scroll.tender-boq-page .content {
  padding: 0 !important;
}
body.tender-reports-page main.content,
body.tender-reports-page .content,
body.no-page-scroll.tender-reports-page main.content,
body.no-page-scroll.tender-reports-page .content,
main.content:has(feature-tender-reports-page),
.content:has(feature-tender-reports-page) {
  padding: 0 !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-height: var(--app-shell-height) !important;
  height: var(--app-shell-height) !important;
  overflow: hidden !important;
}
body.tender-reports-page main.content > feature-tender-reports-page,
body.tender-reports-page .content > feature-tender-reports-page,
body.tender-reports-page main.content > router-outlet + feature-tender-reports-page,
body.tender-reports-page .content > router-outlet + feature-tender-reports-page,
main.content:has(feature-tender-reports-page) > feature-tender-reports-page,
.content:has(feature-tender-reports-page) > feature-tender-reports-page,
main.content:has(feature-tender-reports-page) > router-outlet + feature-tender-reports-page,
.content:has(feature-tender-reports-page) > router-outlet + feature-tender-reports-page {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-height: 0 !important;
  height: 100% !important;
  width: 100% !important;
}
body.settings-page main.content,
body.settings-page .content {
  padding: 0 !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-height: var(--app-shell-height) !important;
  height: var(--app-shell-height) !important;
  overflow: hidden !important;
}
body.settings-page main.content > settings-page,
body.settings-page .content > settings-page,
body.settings-page main.content > feature-material-classification-page,
body.settings-page .content > feature-material-classification-page,
body.settings-page main.content > user-access-control,
body.settings-page .content > user-access-control,
body.settings-page main.content > appearance-settings-page,
body.settings-page .content > appearance-settings-page,
body.settings-page main.content > router-outlet + settings-page,
body.settings-page .content > router-outlet + settings-page,
body.settings-page main.content > router-outlet + feature-material-classification-page,
body.settings-page .content > router-outlet + feature-material-classification-page,
body.settings-page main.content > router-outlet + user-access-control,
body.settings-page .content > router-outlet + user-access-control,
body.settings-page main.content > router-outlet + appearance-settings-page,
body.settings-page .content > router-outlet + appearance-settings-page {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-height: 0 !important;
  height: 100% !important;
}
body.settings-page main.content > feature-material-classification-page,
body.settings-page .content > feature-material-classification-page,
body.settings-page main.content > router-outlet + feature-material-classification-page,
body.settings-page .content > router-outlet + feature-material-classification-page {
  overflow-y: auto !important;
}
body.settings-page main.content > settings-page,
body.settings-page .content > settings-page,
body.settings-page main.content > router-outlet + settings-page,
body.settings-page .content > router-outlet + settings-page {
  min-height: 0 !important;
  height: 100% !important;
}
body.settings-page settings-page engineers-salary-reference-page-design.settings-page-design,
body.settings-page router-outlet + settings-page engineers-salary-reference-page-design.settings-page-design {
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}
body.settings-page settings-page engineers-salary-reference-page-design.settings-page-design .table-area,
body.settings-page router-outlet + settings-page engineers-salary-reference-page-design.settings-page-design .table-area,
body.settings-page settings-page engineers-salary-reference-page-design.settings-page-design .settings-page-shell,
body.settings-page router-outlet + settings-page engineers-salary-reference-page-design.settings-page-design .settings-page-shell {
  min-height: 0 !important;
}
body.tender-projects-page main.content,
body.tender-projects-page .content,
body.tender-suppliers-page main.content,
body.tender-suppliers-page .content,
body.tender-material-classification-page main.content,
body.tender-material-classification-page .content,
main.content:has(feature-material-classification-page),
.content:has(feature-material-classification-page),
body.tender-pricing-page main.content,
body.tender-pricing-page .content,
body.tender-boq-page main.content,
body.tender-boq-page .content,
body.crm-grid-list-page main.content,
body.crm-grid-list-page .content {
  min-height: var(--app-shell-height) !important;
  height: var(--app-shell-height) !important;
  overflow: hidden !important;
}
body.crm-grid-list-page {
  overflow: hidden !important;
}
body.tender-projects-page main.content > router-outlet.card-enter,
body.tender-projects-page .content > router-outlet.card-enter,
body.tender-projects-page main.content > router-outlet,
body.tender-projects-page .content > router-outlet,
body.tender-suppliers-page main.content > router-outlet.card-enter,
body.tender-suppliers-page .content > router-outlet.card-enter,
body.tender-suppliers-page main.content > router-outlet,
body.tender-suppliers-page .content > router-outlet,
body.tender-material-classification-page main.content > router-outlet.card-enter,
body.tender-material-classification-page .content > router-outlet.card-enter,
body.tender-material-classification-page main.content > router-outlet,
body.tender-material-classification-page .content > router-outlet,
body.tender-pricing-page main.content > router-outlet.card-enter,
body.tender-pricing-page .content > router-outlet.card-enter,
body.tender-pricing-page main.content > router-outlet,
body.tender-pricing-page .content > router-outlet,
body.tender-boq-page main.content > router-outlet.card-enter,
body.tender-boq-page .content > router-outlet.card-enter,
body.tender-boq-page main.content > router-outlet,
body.tender-boq-page .content > router-outlet,
body.crm-grid-list-page main.content > router-outlet.card-enter,
body.crm-grid-list-page .content > router-outlet.card-enter,
body.crm-grid-list-page main.content > router-outlet,
body.crm-grid-list-page .content > router-outlet {
  display: none !important;
  flex: 0 0 0 !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
body.tender-pricing-page main.content > feature-tender-pricing-page,
body.tender-pricing-page .content > feature-tender-pricing-page,
body.tender-pricing-page main.content > router-outlet + feature-tender-pricing-page,
body.tender-pricing-page .content > router-outlet + feature-tender-pricing-page,
body.tender-pricing-page main.content > tender-pricing,
body.tender-pricing-page .content > tender-pricing,
body.tender-boq-page main.content > feature-tender-boq-page,
body.tender-boq-page .content > feature-tender-boq-page,
body.tender-boq-page main.content > router-outlet + feature-tender-boq-page,
body.tender-boq-page .content > router-outlet + feature-tender-boq-page,
body.tender-boq-page main.content > tender-boq,
body.tender-boq-page .content > tender-boq,
body.tender-boq-page main.content > project-breakdown-tab,
body.tender-boq-page .content > project-breakdown-tab,
body.tender-boq-page main.content > router-outlet + project-breakdown-tab,
body.tender-boq-page .content > router-outlet + project-breakdown-tab {
  position: absolute !important;
  inset: 0 !important;
}
body.team-tasks-page main.content,
body.team-tasks-page .content {
  padding: 8px 0 0 0 !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-height: var(--app-shell-height) !important;
  height: var(--app-shell-height) !important;
  overflow: hidden !important;
}
body.team-tasks-page main.content > feature-team-tasks-page,
body.team-tasks-page .content > feature-team-tasks-page,
body.team-tasks-page main.content > router-outlet + feature-team-tasks-page,
body.team-tasks-page .content > router-outlet + feature-team-tasks-page,
body.team-tasks-page main.content > feature-task-future-page,
body.team-tasks-page .content > feature-task-future-page,
body.team-tasks-page main.content > router-outlet + feature-task-future-page,
body.team-tasks-page .content > router-outlet + feature-task-future-page,
body.team-tasks-page feature-task-future-page > task-future,
body.team-tasks-page feature-task-future-page,
body.team-tasks-page feature-team-tasks-page > team-tasks,
body.team-tasks-page feature-team-tasks-page,
body.team-tasks-page team-tasks,
body.team-tasks-page task-future {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
body.tender-projects-page main.content > feature-tender-projects-page,
body.tender-projects-page .content > feature-tender-projects-page,
body.tender-projects-page main.content > router-outlet + feature-tender-projects-page,
body.tender-projects-page .content > router-outlet + feature-tender-projects-page,
body.tender-projects-page feature-tender-projects-page > tender-projects,
body.tender-projects-page feature-tender-projects-page,
body.tender-projects-page tender-projects,
body.tender-suppliers-page main.content > tender-suppliers,
body.tender-suppliers-page .content > tender-suppliers,
body.tender-suppliers-page main.content > router-outlet + tender-suppliers,
body.tender-suppliers-page .content > router-outlet + tender-suppliers,
body.tender-material-classification-page main.content > feature-material-classification-page,
body.tender-material-classification-page .content > feature-material-classification-page,
body.tender-material-classification-page main.content > router-outlet + feature-material-classification-page,
body.tender-material-classification-page .content > router-outlet + feature-material-classification-page,
body.tender-material-classification-page feature-material-classification-page,
body.tender-material-classification-page material-classification-settings,
main.content:has(feature-material-classification-page) > feature-material-classification-page,
.content:has(feature-material-classification-page) > feature-material-classification-page,
main.content:has(feature-material-classification-page) > router-outlet + feature-material-classification-page,
.content:has(feature-material-classification-page) > router-outlet + feature-material-classification-page,
main.content:has(feature-material-classification-page) feature-material-classification-page,
.content:has(feature-material-classification-page) feature-material-classification-page,
main.content:has(feature-material-classification-page) material-classification-settings,
.content:has(feature-material-classification-page) material-classification-settings,
body.tender-pricing-page main.content > feature-tender-pricing-page,
body.tender-pricing-page .content > feature-tender-pricing-page,
body.tender-pricing-page main.content > router-outlet + feature-tender-pricing-page,
body.tender-pricing-page .content > router-outlet + feature-tender-pricing-page,
body.tender-pricing-page feature-tender-pricing-page > tender-pricing,
body.tender-pricing-page feature-tender-pricing-page,
body.tender-pricing-page tender-pricing,
body.tender-boq-page main.content > feature-tender-boq-page,
body.tender-boq-page .content > feature-tender-boq-page,
body.tender-boq-page main.content > router-outlet + feature-tender-boq-page,
body.tender-boq-page .content > router-outlet + feature-tender-boq-page,
body.tender-boq-page feature-tender-boq-page > tender-boq,
body.tender-boq-page feature-tender-boq-page,
body.tender-boq-page tender-boq,
body.tender-boq-page main.content > project-breakdown-tab,
body.tender-boq-page .content > project-breakdown-tab,
body.tender-boq-page main.content > router-outlet + project-breakdown-tab,
body.tender-boq-page .content > router-outlet + project-breakdown-tab,
body.tender-boq-page project-breakdown-tab,
body.crm-grid-list-page main.content > app-companies-list,
body.crm-grid-list-page .content > app-companies-list,
body.crm-grid-list-page main.content > router-outlet + app-companies-list,
body.crm-grid-list-page .content > router-outlet + app-companies-list,
body.crm-grid-list-page main.content > app-contacts-list,
body.crm-grid-list-page .content > app-contacts-list,
body.crm-grid-list-page main.content > router-outlet + app-contacts-list,
body.crm-grid-list-page .content > router-outlet + app-contacts-list,
body.crm-grid-list-page main.content > app-deals-kanban,
body.crm-grid-list-page .content > app-deals-kanban,
body.crm-grid-list-page main.content > router-outlet + app-deals-kanban,
body.crm-grid-list-page .content > router-outlet + app-deals-kanban,
body.crm-grid-list-page main.content > app-tickets-list,
body.crm-grid-list-page .content > app-tickets-list,
body.crm-grid-list-page main.content > router-outlet + app-tickets-list,
body.crm-grid-list-page .content > router-outlet + app-tickets-list,
body.crm-grid-list-page main.content > app-tasks-list,
body.crm-grid-list-page .content > app-tasks-list,
body.crm-grid-list-page main.content > router-outlet + app-tasks-list,
body.crm-grid-list-page .content > router-outlet + app-tasks-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
body.tender-projects-page main.content feature-tender-projects-page,
body.tender-projects-page .content feature-tender-projects-page,
body.tender-projects-page main.content tender-projects,
body.tender-projects-page .content tender-projects,
body.tender-material-classification-page main.content feature-material-classification-page,
body.tender-material-classification-page .content feature-material-classification-page,
body.tender-material-classification-page main.content material-classification-settings,
body.tender-material-classification-page .content material-classification-settings,
body.crm-grid-list-page main.content app-companies-list,
body.crm-grid-list-page .content app-companies-list,
body.crm-grid-list-page main.content app-contacts-list,
body.crm-grid-list-page .content app-contacts-list,
body.crm-grid-list-page main.content app-deals-kanban,
body.crm-grid-list-page .content app-deals-kanban,
body.crm-grid-list-page main.content app-tickets-list,
body.crm-grid-list-page .content app-tickets-list,
body.crm-grid-list-page main.content app-tasks-list,
body.crm-grid-list-page .content app-tasks-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
body.tender-pricing-page main.content feature-tender-pricing-page,
body.tender-pricing-page .content feature-tender-pricing-page,
body.tender-pricing-page main.content tender-pricing,
body.tender-pricing-page .content tender-pricing {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
body.tender-boq-page main.content feature-tender-boq-page,
body.tender-boq-page .content feature-tender-boq-page,
body.tender-boq-page main.content tender-boq,
body.tender-boq-page .content tender-boq,
body.tender-boq-page main.content project-breakdown-tab,
body.tender-boq-page .content project-breakdown-tab {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
body.tender-projects-page tender-projects {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
body.tender-projects-page tender-projects .proj-page {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
}
body.salary-reports-page engineers-salary-reference-page-design.tender-projects-page-design .wsh__header {
  display: none !important;
}
body.salary-reports-page main.content,
body.salary-reports-page .content {
  padding: 0 !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: var(--app-shell-height) !important;
  height: var(--app-shell-height) !important;
  overflow: hidden !important;
}
body.submit-report-page main.content,
body.submit-report-page .content {
  padding: 0 !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: var(--app-shell-height) !important;
  height: var(--app-shell-height) !important;
  overflow: hidden !important;
}
body.submit-report-page main.content > router-outlet,
body.submit-report-page .content > router-outlet,
body.submit-report-page main.content > router-outlet.card-enter,
body.submit-report-page .content > router-outlet.card-enter {
  display: none !important;
  flex: 0 0 0 !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
body.submit-report-page main.content > feature-submit-salary-report-page,
body.submit-report-page .content > feature-submit-salary-report-page,
body.submit-report-page main.content > router-outlet + feature-submit-salary-report-page,
body.submit-report-page .content > router-outlet + feature-submit-salary-report-page,
body.submit-report-page feature-submit-salary-report-page {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}
body.salary-reports-page main.content > router-outlet.card-enter,
body.salary-reports-page .content > router-outlet.card-enter,
body.salary-reports-page main.content > router-outlet,
body.salary-reports-page .content > router-outlet {
  display: none !important;
  flex: 0 0 0 !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
body.salary-reports-page main.content > feature-tender-projects-page,
body.salary-reports-page .content > feature-tender-projects-page,
body.salary-reports-page main.content > router-outlet + feature-tender-projects-page,
body.salary-reports-page .content > router-outlet + feature-tender-projects-page,
body.salary-reports-page feature-tender-projects-page,
body.salary-reports-page tender-projects,
body.salary-reports-page tender-projects .proj-page {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}
body.tender-suppliers-page tender-suppliers {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
body.tender-suppliers-page tender-suppliers .sup-page {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
}
body.crm-route:not(.crm-grid-list-page):has(app-contacts-list) main.content,
body.crm-route:not(.crm-grid-list-page):has(app-contacts-list) .content,
body.crm-route:not(.crm-grid-list-page):has(app-companies-list) main.content,
body.crm-route:not(.crm-grid-list-page):has(app-companies-list) .content,
body.crm-route:not(.crm-grid-list-page):has(app-deals-kanban) main.content,
body.crm-route:not(.crm-grid-list-page):has(app-deals-kanban) .content {
  padding: 8px 16px 8px 16px !important;
}
body.crm-company-record main.content,
body.crm-company-record .content,
body.crm-contact-record main.content,
body.crm-contact-record .content,
body.crm-deal-record main.content,
body.crm-deal-record .content {
  padding: 0 !important;
}
body.crm-route main.content,
body.crm-route .content {
  padding-top: 0 !important;
}
body.crm-grid-list-page main.content,
body.crm-grid-list-page .content {
  padding: 0 !important;
  padding-top: 0 !important;
  padding-inline: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
}
body.crm-route app-crm-shell .page.crm-shell {
  padding-top: 0 !important;
  padding: 0 !important;
}
body.crm-route app-crm-shell .crm-content {
  gap: 0 !important;
  padding-top: 0 !important;
}
body.crm-route app-crm-shell .crm-body {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body.crm-route app-crm-shell router-outlet {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body.crm-route app-contacts-list,
body.crm-route app-companies-list,
body.crm-route app-deals-kanban {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body.crm-route app-contacts-list .crm-page,
body.crm-route app-companies-list .crm-page,
body.crm-route app-deals-kanban .crm-page {
  padding-top: 16px !important;
  margin-top: 0 !important;
}
app-contacts-list .crm-page,
app-companies-list .crm-page,
app-deals-kanban .crm-page {
  padding-top: 16px !important;
}
body.crm-route app-crm-shell .crm-content:has(app-contacts-list) .crm-page,
body.crm-route app-crm-shell .crm-content:has(app-companies-list) .crm-page,
body.crm-route app-crm-shell .crm-content:has(app-deals-kanban) .crm-page {
  padding-top: 16px !important;
}
body.crm-route app-crm-shell router-outlet app-contacts-list .crm-page,
body.crm-route app-crm-shell router-outlet app-companies-list .crm-page,
body.crm-route app-crm-shell router-outlet app-deals-kanban .crm-page {
  padding-top: 16px !important;
}
:host app-contacts-list .crm-page,
:host app-companies-list .crm-page,
:host app-deals-kanban .crm-page {
  padding-top: 16px !important;
}
main.content.crm-company-record-content,
main.content.crm-contact-record-content,
main.content.crm-deal-record-content {
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.crm-company-record app-crm-shell .page.crm-shell,
body.crm-contact-record app-crm-shell .page.crm-shell,
body.crm-deal-record app-crm-shell .page.crm-shell {
  padding: 0 10px 0 !important;
  gap: 0 !important;
  margin: 0 !important;
}
body.crm-company-record app-crm-shell .crm-content,
body.crm-contact-record app-crm-shell .crm-content,
body.crm-deal-record app-crm-shell .crm-content {
  gap: 0 !important;
}
body.crm-company-record app-company-record,
body.crm-contact-record app-contact-record,
body.crm-deal-record app-deal-record {
  display: block;
  margin: 0 !important;
  padding-top: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
body.crm-company-record app-company-record .crm-record-layout,
body.crm-contact-record app-contact-record .crm-record-layout,
body.crm-deal-record app-deal-record .crm-record-layout {
  margin-top: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  transform: none !important;
}
body.crm-company-record app-crm-shell .crm-body,
body.crm-contact-record app-crm-shell .crm-body,
body.crm-deal-record app-crm-shell .crm-body {
  padding: 0 !important;
  margin: 0 !important;
}
body.crm-company-record app-crm-shell router-outlet,
body.crm-contact-record app-crm-shell router-outlet,
body.crm-deal-record app-crm-shell router-outlet {
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}
body.crm-company-record app-crm-shell router-outlet > *,
body.crm-contact-record app-crm-shell router-outlet > *,
body.crm-deal-record app-crm-shell router-outlet > * {
  margin: 0 !important;
  padding: 0 !important;
}
main.content:has(app-company-record),
main.content:has(app-contact-record),
main.content:has(app-deal-record) {
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.table-card {
  border: 1px solid rgb(var(--border-strong));
  border-radius: 14px;
  overflow: hidden;
  background: rgba(var(--surface), var(--surfaceA));
}
.animate-pop {
  animation: pop 0.15s ease-out;
}
@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.card-enter {
  animation: fadein 0.18s ease-out;
}
@keyframes fadein {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.theme-toggle-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-inline-start: 2px;
  min-width: var(--app-header-toggle-width, 44px);
  flex-shrink: 0;
  flex: 0 0 var(--app-header-toggle-width, 44px);
}
.theme-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 22px;
  flex: 0 0 44px;
  cursor: pointer;
}
.theme-toggle-input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.theme-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--app-shell-control-bg);
  border: var(--app-control-stroke);
  border-radius: 999px;
  transition:
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  overflow: hidden;
}
.theme-toggle-slider::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: transparent;
  opacity: 0;
  pointer-events: none;
}
.theme-toggle-slider::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  border: none;
  opacity: 0;
  pointer-events: none;
}
.theme-toggle-icon {
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  width: 16px;
  height: 16px;
  background: var(--app-shell-accent-bg-strong);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--app-shell-accent-text);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    background 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease;
  box-shadow: none;
  z-index: 1;
  border: 1px solid var(--app-shell-accent-border);
}
.theme-toggle-icon .bi,
.theme-toggle-icon .theme-toggle-svg {
  width: 11px;
  height: 11px;
  display: block;
  text-shadow: none;
}
.theme-toggle-input:checked + .theme-toggle-slider {
  background: var(--app-shell-control-bg-hover);
  border-color: var(--app-shell-control-border-hover);
  box-shadow: none;
}
.theme-toggle-input:checked + .theme-toggle-slider::before {
  opacity: 0.5;
}
.theme-toggle-input:checked + .theme-toggle-slider::after {
  border-color: var(--app-shell-control-border-hover);
  opacity: 0.5;
}
.theme-toggle-input:checked + .theme-toggle-slider .theme-toggle-icon {
  transform: translateX(24px) translateY(-50%) rotate(180deg);
  background: var(--app-color-surface);
  color: var(--app-shell-icon-active);
  border-color: var(--app-shell-accent-border-strong);
  box-shadow: none;
  animation: sun-moon-spin 0.5s ease;
}
.theme-toggle-input:checked + .theme-toggle-slider .theme-toggle-icon .bi,
.theme-toggle-input:checked + .theme-toggle-slider .theme-toggle-icon .theme-toggle-svg {
  color: var(--app-shell-icon-active);
  text-shadow: none;
  font-weight: 700;
  -webkit-text-stroke: 0;
}
.theme-toggle-input:not(:checked) + .theme-toggle-slider .theme-toggle-icon .bi,
.theme-toggle-input:not(:checked) + .theme-toggle-slider .theme-toggle-icon .theme-toggle-svg {
  color: var(--app-shell-accent-text);
}
.theme-toggle-input:focus-visible + .theme-toggle-slider {
  box-shadow: var(--app-shell-focus-ring);
}
.theme-toggle:hover .theme-toggle-slider {
  border-color: var(--app-shell-control-border-hover);
  box-shadow: none;
}
.theme-toggle:hover .theme-toggle-icon {
  box-shadow: none;
}
.theme-toggle-input:checked + .theme-toggle-slider:hover {
  border-color: var(--app-shell-accent-border-strong);
  box-shadow: none;
}
.theme-toggle:active .theme-toggle-icon {
  transform: translateY(-50%) rotate(0deg) scale(0.98);
}
.theme-toggle-input:checked:active + .theme-toggle-slider .theme-toggle-icon {
  transform: translateX(24px) translateY(-50%) rotate(180deg) scale(0.98);
}
.theme-toggle-input:not(:checked) + .theme-toggle-slider .theme-toggle-icon {
  animation: sun-moon-spin-rev 0.5s ease;
}
@keyframes sun-moon-spin {
  to {
    transform: translateX(24px) translateY(-50%) rotate(180deg);
  }
}
@keyframes sun-moon-spin-rev {
  from {
    transform: translateX(24px) translateY(-50%) rotate(180deg);
  }
  to {
    transform: translateX(0) translateY(-50%) rotate(0deg);
  }
}
*::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}
*::-webkit-scrollbar-thumb {
  background: rgb(var(--border-strong));
  border-radius: 10px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
header.bg-bar,
.hdr,
.hdr::before,
.hdr::after {
  box-shadow: none !important;
  outline: none !important;
}
.sidebar,
.sidebar-inner,
.sidebar::before,
.sidebar::after {
  box-shadow: none !important;
  outline: none !important;
}
header.bg-bar {
  border-bottom: none !important;
}
.hdr,
.hdr::before,
.hdr::after,
.sidebar-inner,
.sidebar::before,
.sidebar::after {
  border: none !important;
}
.sidebar {
  border-inline-end: none !important;
}
header.bg-bar::before {
  content: none !important;
}
.sidebar::before,
.sidebar::after {
  content: none !important;
}
:root {
  --z-content: 10;
  --z-sidebar: 20;
  --z-header: 30;
  --z-scrim: 1500;
  --z-dropdown: 2000;
}
header.bg-bar {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
}
.sidebar {
  position: sticky;
  top: 0;
  z-index: var(--z-sidebar);
}
.content {
  position: relative;
  z-index: var(--z-content);
}
body.tender-suppliers-page:has(.supplier-mail-preview-overlay) .content {
  z-index: 5000;
}
body.tender-suppliers-page:has(.supplier-mail-preview-overlay) app-messages-widget {
  z-index: 0 !important;
}
body.tender-suppliers-page:has(.supplier-mail-preview-overlay) app-messages-widget,
body.tender-suppliers-page:has(.supplier-mail-preview-overlay) app-messages-widget .chat-widget {
  pointer-events: none !important;
}
body.tender-suppliers-page:has(.supplier-mail-preview-overlay) app-messages-widget .chat-widget {
  display: none !important;
}
.cdk-overlay-container {
  z-index: 200000 !important;
}
.cdk-overlay-pane.custom-dropdown-overlay {
  position: fixed !important;
  z-index: 200001 !important;
  pointer-events: auto !important;
}
.cdk-overlay-pane.search-select-overlay {
  position: fixed !important;
  z-index: 200005 !important;
  pointer-events: auto !important;
}
.cdk-overlay-pane.date-input-overlay {
  position: fixed !important;
  z-index: 200010 !important;
  pointer-events: auto !important;
}
.menu-panel {
  position: absolute;
  z-index: var(--z-dropdown) !important;
}
.account-menu {
  position: fixed !important;
}
.access-child .body {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
}
.access-child .body > user-access-control {
  flex: 1;
  min-height: 0;
  pointer-events: auto;
}
.settings-overlay,
.settings-overlay * {
  pointer-events: auto;
}
.scrim {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: var(--z-scrim);
}
:root {
  --scrollbar-size: 0.2px;
  --scrollbar-thumb: rgb(var(--border-strong));
  --scrollbar-track: transparent;
}
body.team-tasks-page {
  --scrollbar-size: 10px;
}
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
*::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}
*::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--scrollbar-thumb) 90%, transparent);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
*::-webkit-scrollbar-corner {
  background: transparent;
}
:host ::ng-deep .ag-column-panel,
:host ::ng-deep .ag-pivot-mode-panel,
:host ::ng-deep [aria-label="Column Labels"],
:host ::ng-deep [ref=ePivotDropZone],
:host ::ng-deep .ag-column-drop-pivot {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}
body.no-page-scroll {
  overflow: hidden !important;
}
body.no-page-scroll .content {
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: var(--app-shell-height);
}
body.no-page-scroll.tender-projects-page main.content,
body.no-page-scroll.tender-projects-page .content,
body.no-page-scroll.tender-material-classification-page main.content,
body.no-page-scroll.tender-material-classification-page .content,
body.no-page-scroll.tender-pricing-page main.content,
body.no-page-scroll.tender-pricing-page .content,
body.no-page-scroll.tender-boq-page main.content,
body.no-page-scroll.tender-boq-page .content {
  overflow: hidden !important;
  min-height: var(--app-shell-height) !important;
  height: var(--app-shell-height) !important;
}
body.no-page-scroll .content > * {
  min-height: 0 !important;
}
body.no-page-scroll.tender-projects-page main.content > feature-tender-projects-page,
body.no-page-scroll.tender-projects-page .content > feature-tender-projects-page,
body.no-page-scroll.tender-projects-page main.content > router-outlet + feature-tender-projects-page,
body.no-page-scroll.tender-projects-page .content > router-outlet + feature-tender-projects-page,
body.no-page-scroll.tender-projects-page feature-tender-projects-page > tender-projects,
body.no-page-scroll.tender-projects-page feature-tender-projects-page,
body.no-page-scroll.tender-projects-page tender-projects,
body.no-page-scroll.tender-suppliers-page main.content > tender-suppliers,
body.no-page-scroll.tender-suppliers-page .content > tender-suppliers,
body.no-page-scroll.tender-suppliers-page main.content > router-outlet + tender-suppliers,
body.no-page-scroll.tender-suppliers-page .content > router-outlet + tender-suppliers,
body.no-page-scroll.tender-material-classification-page main.content > feature-material-classification-page,
body.no-page-scroll.tender-material-classification-page .content > feature-material-classification-page,
body.no-page-scroll.tender-material-classification-page main.content > router-outlet + feature-material-classification-page,
body.no-page-scroll.tender-material-classification-page .content > router-outlet + feature-material-classification-page,
body.no-page-scroll.tender-material-classification-page feature-material-classification-page,
body.no-page-scroll.tender-material-classification-page material-classification-settings,
body.no-page-scroll.tender-pricing-page main.content > feature-tender-pricing-page,
body.no-page-scroll.tender-pricing-page .content > feature-tender-pricing-page,
body.no-page-scroll.tender-pricing-page main.content > router-outlet + feature-tender-pricing-page,
body.no-page-scroll.tender-pricing-page .content > router-outlet + feature-tender-pricing-page,
body.no-page-scroll.tender-pricing-page feature-tender-pricing-page > tender-pricing,
body.no-page-scroll.tender-pricing-page feature-tender-pricing-page,
body.no-page-scroll.tender-pricing-page tender-pricing,
body.no-page-scroll.tender-boq-page main.content > feature-tender-boq-page,
body.no-page-scroll.tender-boq-page .content > feature-tender-boq-page,
body.no-page-scroll.tender-boq-page main.content > router-outlet + feature-tender-boq-page,
body.no-page-scroll.tender-boq-page .content > router-outlet + feature-tender-boq-page,
body.no-page-scroll.tender-boq-page feature-tender-boq-page > tender-boq,
body.no-page-scroll.tender-boq-page feature-tender-boq-page,
body.no-page-scroll.tender-boq-page tender-boq,
body.no-page-scroll.tender-boq-page main.content > project-breakdown-tab,
body.no-page-scroll.tender-boq-page .content > project-breakdown-tab,
body.no-page-scroll.tender-boq-page main.content > router-outlet + project-breakdown-tab,
body.no-page-scroll.tender-boq-page .content > router-outlet + project-breakdown-tab,
body.no-page-scroll.tender-boq-page project-breakdown-tab {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
body.no-page-scroll.tender-projects-page main.content feature-tender-projects-page,
body.no-page-scroll.tender-projects-page .content feature-tender-projects-page,
body.no-page-scroll.tender-projects-page main.content tender-projects,
body.no-page-scroll.tender-projects-page .content tender-projects {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
body.no-page-scroll.tender-pricing-page main.content feature-tender-pricing-page,
body.no-page-scroll.tender-pricing-page .content feature-tender-pricing-page,
body.no-page-scroll.tender-pricing-page main.content tender-pricing,
body.no-page-scroll.tender-pricing-page .content tender-pricing {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
body.no-page-scroll.tender-boq-page main.content feature-tender-boq-page,
body.no-page-scroll.tender-boq-page .content feature-tender-boq-page,
body.no-page-scroll.tender-boq-page main.content tender-boq,
body.no-page-scroll.tender-boq-page .content tender-boq,
body.no-page-scroll.tender-boq-page main.content project-breakdown-tab,
body.no-page-scroll.tender-boq-page .content project-breakdown-tab {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.proc-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 32px clamp(18px, 4vw, 42px) 60px;
  background:
    linear-gradient(
      140deg,
      rgba(247, 251, 255, 0.96) 0%,
      rgba(236, 244, 255, 0.92) 42%,
      rgba(224, 238, 255, 0.92) 100%),
    radial-gradient(
      circle at 10% -20%,
      rgba(128, 196, 255, 0.25) 0%,
      transparent 55%),
    radial-gradient(
      circle at 90% 0%,
      rgba(140, 228, 210, 0.25) 0%,
      transparent 55%);
  border-radius: 36px;
  border: 1px solid rgba(122, 170, 255, 0.35);
  box-shadow: 0 32px 80px rgba(10, 40, 90, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  overflow: hidden;
  isolation: isolate;
}
.proc-shell::before,
.proc-shell::after {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  pointer-events: none;
  mix-blend-mode: screen;
  animation: proc-drift 22s ease-in-out infinite;
}
.proc-shell::before {
  top: -160px;
  left: -120px;
  background:
    radial-gradient(
      circle,
      rgba(160, 210, 255, 0.55),
      transparent 60%);
}
.proc-shell::after {
  bottom: -160px;
  right: -40px;
  background:
    radial-gradient(
      circle,
      rgba(156, 239, 224, 0.55),
      transparent 62%);
  animation-delay: -8s;
}
.proc-halo {
  position: absolute;
  inset: -18%;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 28% 6%,
      rgba(180, 220, 255, 0.32),
      transparent 60%);
  filter: blur(26px);
  opacity: 0.8;
}
.proc-shell .section-title {
  display: flex;
  align-items: center;
  gap: 16px;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 12px;
  color: rgba(45, 70, 110, 0.55);
}
.proc-shell .section-title::before {
  content: "";
  width: 52px;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      rgba(110, 160, 255, 0) 0%,
      rgba(110, 160, 255, 0.75) 60%,
      rgba(110, 160, 255, 0) 100%);
}
.proc-orbit {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.proc-pod {
  position: relative;
  padding: 20px;
  border-radius: 24px;
  border: 1px solid rgba(118, 170, 255, 0.35);
  background:
    linear-gradient(
      140deg,
      rgba(255, 255, 255, 0.92),
      rgba(233, 243, 255, 0.9));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 26px 34px rgba(40, 60, 110, 0.12);
  display: grid;
  gap: 12px;
  overflow: hidden;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}
.proc-pod:hover {
  transform: translateY(-4px);
  border-color: rgba(118, 170, 255, 0.6);
  box-shadow: 0 30px 40px rgba(40, 60, 110, 0.18);
}
.proc-pod::after {
  content: "";
  position: absolute;
  inset: -45% -25%;
  background:
    radial-gradient(
      circle at 24% 20%,
      rgba(160, 210, 255, 0.35),
      transparent 65%);
  filter: blur(32px);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.proc-pod:hover::after {
  opacity: 0.9;
}
.proc-pod header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.45px;
  color: rgba(44, 70, 120, 0.6);
}
.proc-pod .proc-pod-icon {
  width: 24px;
  min-width: 24px;
  height: 24px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(31, 94, 207, 0.82);
  background: rgba(126, 166, 238, 0.14);
  box-shadow: inset 0 0 0 1px rgba(126, 166, 238, 0.16);
}
.proc-pod .proc-pod-icon .app-icon-host {
  width: 14px;
  height: 14px;
}
.proc-pod .proc-value {
  font-size: 28px;
  font-weight: 800;
  color: #1b2a4f;
  letter-spacing: 0.4px;
}
.proc-pod .proc-caption {
  margin: 0;
  font-size: 12px;
  color: rgba(46, 68, 110, 0.64);
}
.proc-pod .proc-delta {
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 11px;
  background: rgba(116, 178, 255, 0.18);
  color: #3c6af5;
}
.proc-pod .proc-delta.positive {
  background: rgba(40, 206, 145, 0.18);
  color: #0b8d5a;
}
.proc-pod .proc-delta.negative {
  background: rgba(255, 161, 161, 0.22);
  color: #bf2d2d;
}
.proc-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.proc-grid.proc-grid--stretch {
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}
.proc-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px;
  border-radius: 28px;
  border: 1px solid rgba(130, 180, 255, 0.35);
  background:
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(235, 244, 255, 0.93) 48%,
      rgba(224, 238, 255, 0.93) 100%);
  box-shadow: 0 32px 60px rgba(42, 67, 120, 0.16);
  overflow: hidden;
}
.proc-panel::before {
  content: "";
  position: absolute;
  inset: -28% -24%;
  background:
    radial-gradient(
      circle at 18% 12%,
      rgba(160, 210, 255, 0.35),
      transparent 65%);
  filter: blur(28px);
  opacity: 0.75;
  pointer-events: none;
}
.proc-panel header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.proc-panel header h2,
.proc-panel header h3 {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0.8px;
  color: #1d2c4f;
}
.proc-panel header p {
  margin: 4px 0 0;
  font-size: 12px;
  color: rgba(35, 60, 110, 0.6);
}
.proc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(118, 176, 255, 0.16);
  color: #3f63d8;
  font-size: 11px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.proc-pulse {
  position: relative;
}
.proc-pulse::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  background: inherit;
  filter: blur(18px);
  opacity: 0;
  animation: proc-pulse 2.8s ease infinite;
}
.proc-table {
  border-radius: 20px;
  background: rgba(249, 252, 255, 0.92);
  border: 1px solid rgba(132, 188, 255, 0.3);
  box-shadow: 0 24px 46px rgba(42, 67, 120, 0.12);
  overflow: hidden;
}
.proc-table .ag-root-wrapper {
  background: transparent;
  border: none;
}
.proc-table .ag-root-wrapper-body {
  background: transparent;
}
.proc-stats {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.proc-stats li {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(250, 253, 255, 0.95);
  border: 1px solid rgba(132, 188, 255, 0.32);
  box-shadow: 0 18px 32px rgba(52, 72, 120, 0.12);
  color: rgba(42, 58, 98, 0.75);
  font-size: 12px;
}
.proc-stats strong {
  font-size: 16px;
  color: #1d2c4f;
}
.proc-timeline {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.proc-timeline li {
  position: relative;
  padding: 16px 18px 16px 36px;
  border-radius: 18px;
  border: 1px solid rgba(136, 196, 255, 0.35);
  background: rgba(249, 252, 255, 0.95);
  box-shadow: 0 18px 32px rgba(52, 72, 120, 0.12);
  color: #2d3f66;
  font-size: 12px;
}
.proc-timeline li::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 20px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #3c6af5;
  box-shadow: 0 0 0 0 rgba(60, 106, 245, 0.25);
  animation: proc-pulse 2.6s ease infinite;
}
.proc-timeline li[data-tone=warning]::before {
  background: #f7a63d;
  box-shadow: 0 0 0 0 rgba(247, 166, 61, 0.25);
}
.proc-timeline li[data-tone=danger]::before {
  background: #ef5350;
  box-shadow: 0 0 0 0 rgba(239, 83, 80, 0.25);
}
.proc-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(118, 176, 255, 0.18);
  color: #3f63d8;
  font-size: 11px;
  letter-spacing: 0.4px;
}
.proc-marquee {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(130, 188, 255, 0.3);
  background: rgba(245, 250, 255, 0.92);
  box-shadow: 0 26px 48px rgba(42, 67, 120, 0.12);
}
.proc-marquee-track {
  display: flex;
  gap: 24px;
  padding: 18px 30px;
  animation: proc-marquee 22s linear infinite;
  white-space: nowrap;
  color: rgba(42, 58, 98, 0.68);
  font-size: 12px;
}
.proc-marquee::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(245, 249, 255, 1) 0%,
      rgba(245, 249, 255, 0) 12%,
      rgba(245, 249, 255, 0) 88%,
      rgba(245, 249, 255, 1) 100%);
}
.proc-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}
.proc-hero-main {
  flex: 1 1 420px;
  display: grid;
  gap: 18px;
}
.proc-hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.proc-hero-cta .btn {
  padding: 10px 18px;
  border-radius: 14px;
  border: 1px solid rgba(116, 176, 255, 0.4);
  background: rgba(118, 176, 255, 0.18);
  color: #2a3f6a;
  font-size: 12px;
  letter-spacing: 0.55px;
  transition: all 0.18s ease;
}
.proc-hero-cta .btn:hover {
  border-color: rgba(116, 176, 255, 0.65);
  color: #13244a;
  box-shadow: 0 18px 30px rgba(80, 120, 200, 0.18);
}
.proc-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(40, 206, 145, 0.18);
  color: #0b8d5a;
  font-size: 11px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.proc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.4px;
  color: rgba(45, 70, 112, 0.6);
}
.proc-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.proc-legend span::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--dot-color, rgba(118, 176, 255, 0.8));
}
.proc-glass {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(120, 186, 255, 0.28);
  border-radius: 22px;
  box-shadow: 0 24px 46px rgba(52, 72, 120, 0.16);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.proc-floating {
  animation: proc-float 18s ease-in-out infinite;
}
.proc-floating:nth-child(2) {
  animation-delay: -5s;
}
.proc-floating:nth-child(3) {
  animation-delay: -9s;
}
@keyframes proc-drift {
  0%, 100% {
    transform: translate3d(0, 0, 0);
    opacity: 0.55;
  }
  40% {
    transform: translate3d(16px, 10px, 0);
    opacity: 0.7;
  }
  70% {
    transform: translate3d(-18px, 20px, 0);
    opacity: 0.55;
  }
}
@keyframes proc-pulse {
  0% {
    opacity: 0.85;
    transform: scale(0.95);
  }
  45% {
    opacity: 0.2;
    transform: scale(1.25);
  }
  100% {
    opacity: 0;
    transform: scale(1.45);
  }
}
@keyframes proc-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
@keyframes proc-float {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -12px, 0);
  }
}
@media (min-width: 1921px) {
  :root {
    --full-height: 100dvh;
  }
  body {
    zoom: var(--app-scale);
  }
}
@media (min-width: 1441px) and (max-width: 1920px) {
  :root {
    --app-scale: 1;
    --full-height: 100dvh;
  }
  body {
    zoom: var(--app-scale);
  }
}
@media (min-width: 1281px) and (max-width: 1440px) {
  :root {
    --full-height: 100dvh;
  }
  body {
    zoom: var(--app-scale);
  }
}
@media (min-width: 1025px) and (max-width: 1280px) {
  :root {
    --app-scale: 0.8;
    --full-height: 100dvh;
    --sideW-open: 200px;
  }
  body {
    zoom: var(--app-scale);
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --app-scale: 0.8;
    --full-height: 100dvh;
    --sideW-open: 180px;
  }
  body {
    zoom: var(--app-scale);
  }
}
@media (max-width: 768px) {
  :root {
    --app-scale: 0.8;
    --full-height: 100dvh;
  }
  body {
    zoom: var(--app-scale);
  }
  .proc-shell {
    padding: 26px clamp(14px, 5vw, 24px) 46px;
    border-radius: 26px;
  }
  .proc-panel {
    padding: 22px;
    border-radius: 22px;
  }
  .proc-orbit {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  }
  .proc-grid.proc-grid--stretch {
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  }
}
@media (max-width: 1024px) {
  :root {
    --app-scale: 1;
    --sideW-collapsed: 48px;
    --sideW-open: min(280px, 82vw);
  }
  body {
    zoom: 1 !important;
  }
  .bg-app {
    --app-shell-sidebar-width: var(--sideW-open);
  }
  .bg-app.sidebar-collapsed {
    --app-shell-sidebar-width: var(--sideW-collapsed);
  }
  header.bg-bar .hdr {
    grid-template-columns: var(--app-shell-sidebar-width) minmax(0, 1fr) auto;
  }
  .shell {
    grid-template-columns: var(--app-shell-sidebar-width) minmax(0, 1fr);
  }
  .shell {
    overflow: hidden;
  }
  .shell::before {
    left: var(--app-shell-sidebar-width);
  }
  .sidebar.is-collapsed {
    width: var(--sideW-collapsed);
    --app-collapsed-item-size: 36px;
    --app-collapsed-icon-nudge: 0px;
  }
  .bg-app:not(.sidebar-collapsed) .sidebar {
    position: sticky;
    inset: auto;
    width: var(--sideW-open);
    height: 100%;
    z-index: var(--z-sidebar);
    box-shadow: none;
    overflow: visible;
  }
  .bg-app:not(.sidebar-collapsed)::after {
    content: none;
  }
  .bg-app.sidebar-collapsed .sidebar {
    position: sticky;
    inset: auto;
    width: var(--sideW-collapsed);
    height: 100%;
    box-shadow: none;
  }
  .collapsed-area-flyout {
    width: min(260px, calc(100vw - var(--sideW-collapsed) - 16px)) !important;
    max-width: calc(100vw - var(--sideW-collapsed) - 16px);
  }
  .content {
    min-width: 0;
  }
}
@media (max-width: 640px) {
  .bg-app:not(.sidebar-collapsed) .sidebar {
    box-shadow: 18px 0 36px rgb(0 0 0 / 24%);
  }
}
.btn.primary {
  background:
    linear-gradient(
      135deg,
      rgba(var(--primary), 0.24),
      rgba(var(--primary), 0.18));
  border: 1px solid rgba(var(--primary), 0.5);
  color: rgb(224 255 244);
}
.btn.ghost {
  background: rgba(var(--surface), var(--surfaceA));
  border: 1px solid rgb(var(--border-strong));
  color: inherit;
}
.btn.danger {
  background: rgba(244, 63, 94, 0.12);
  border: 1px solid rgba(244, 63, 94, 0.35);
  color: #ffc6d3;
}
.pane {
  display: block;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgb(var(--border));
  background: rgba(var(--surface), var(--surfaceA));
  color: rgb(var(--fg));
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}
.pane[pane-level="1"] {
  padding: 22px;
  border-radius: 22px;
}
.pane[pane-level="2"] {
  padding: 16px;
  border-radius: 18px;
}
.pane.pane--surface {
  background: rgb(var(--surface));
}
.pane > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(var(--border), 0.45);
}
.section-title {
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: 0.64rem;
  color: rgb(var(--muted));
}
.panel.official-details-overlay {
  overflow: hidden !important;
}
.panel.official-details-overlay .body {
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  padding: 0 !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.panel.official-details-overlay .body::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
.notif-button {
  position: relative;
}
.notif-badge {
  position: absolute;
  top: -3px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--app-shell-badge-danger-bg);
  color: var(--app-shell-badge-danger-text);
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--app-shell-control-bg);
}
.notifications-panel {
  --notif-panel-bg: var(--app-shell-panel-bg);
  --notif-panel-border: var(--app-shell-control-border);
  --notif-panel-divider: var(--app-shell-subpanel-divider);
  --notif-surface-soft: color-mix(in oklab, var(--app-shell-control-bg) 24%, transparent);
  --notif-surface-strong: color-mix(in oklab, var(--app-shell-control-bg) 46%, transparent);
  --notif-border-soft: color-mix(in oklab, var(--notif-panel-border) 56%, transparent);
  --notif-border-strong: color-mix(in oklab, var(--notif-panel-border) 82%, transparent);
  --notif-row-hover-bg: var(--app-shell-control-bg-hover);
  --notif-row-active-bg: var(--app-shell-accent-bg);
  --notif-avatar-bg: var(--app-shell-control-bg);
  --notif-avatar-border: var(--app-shell-control-border);
  --notif-type-info: var(--app-color-info);
  --notif-type-info-bg: var(--app-color-info-bg);
  --notif-type-success: var(--app-color-success);
  --notif-type-success-bg: var(--app-color-success-bg);
  --notif-type-warning: var(--app-color-warning);
  --notif-type-warning-bg: var(--app-color-warning-bg);
  --notif-type-error: var(--app-color-danger-text);
  --notif-type-error-bg: var(--app-color-danger-bg);
  --notif-type-system: var(--app-color-primary-text);
  --notif-type-system-bg: var(--app-color-primary-bg);
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  display: flex;
  flex-direction: column;
  width: min(440px, calc(100vw - 20px));
  max-width: calc(100vw - 20px);
  max-height: min(74vh, 700px);
  padding: 0;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--notif-border-strong);
  background: var(--notif-panel-bg);
  box-shadow: none;
}
.notifications-panel::before {
  content: none;
}
@media (max-width: 720px) {
  .notifications-panel {
    right: 0;
    width: min(440px, calc(100vw - 20px));
  }
}
.notifications-header {
  position: relative;
  z-index: 1;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px 11px;
  border-bottom: var(--notif-panel-divider);
  background: var(--notif-panel-bg);
}
.notifications-header-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.notifications-header .title {
  color: var(--app-color-text-high);
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: none !important;
}
.notifications-header-subtitle {
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--app-color-text-muted);
  text-transform: none !important;
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notifications-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.notifications-settings-button {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--app-shell-icon);
  border: 1px solid transparent;
  background: transparent;
  transition:
    background-color var(--app-shell-motion-duration-fast) ease,
    border-color var(--app-shell-motion-duration-fast) ease,
    color var(--app-shell-motion-duration-fast) ease;
}
.notifications-settings-button:hover,
.notifications-settings-button:focus-visible {
  color: var(--app-shell-icon-active);
  border-color: var(--notif-border-soft);
  background: var(--notif-surface-soft);
}
.notifications-settings-button svg {
  width: 16px;
  height: 16px;
}
.notifications-body {
  position: relative;
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  flex: 1 1 auto;
  gap: 10px;
  min-height: 160px;
  max-height: min(54vh, 500px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  contain: layout paint style;
  padding: 10px;
  background: var(--notif-panel-bg);
}
.notifications-body--scrollable {
  padding-right: 10px;
}
.notifications-footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-top: var(--notif-panel-divider);
  background: var(--notif-panel-bg);
}
.notifications-footer > .btn,
.notifications-footer > .btn-accent {
  flex: 1 1 0;
  justify-content: center;
  min-width: 0;
}
.notif-row {
  width: 100%;
  min-height: 0;
  border-radius: 11px;
  padding: 9px 9px 8px;
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
  background: color-mix(in oklab, var(--app-shell-control-bg) 22%, transparent);
  border: 1px solid var(--notif-border-soft);
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  box-shadow: none;
  content-visibility: auto;
  contain-intrinsic-size: 96px;
  transition:
    background-color var(--app-shell-motion-duration-fast) ease,
    border-color var(--app-shell-motion-duration-fast) ease,
    transform var(--app-shell-motion-duration-fast) ease,
    color var(--app-shell-motion-duration-fast) ease;
}
.notif-row::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 15px;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--app-color-primary);
  opacity: 0;
  transform: none;
  transition: opacity var(--app-shell-motion-duration-fast) ease;
}
.notif-row:last-of-type {
  margin-bottom: 0;
}
.notif-row:hover {
  background: color-mix(in oklab, var(--notif-row-hover-bg) 44%, transparent);
  border-color: color-mix(in oklab, var(--app-color-primary-border) 20%, var(--notif-panel-border));
  transform: none;
}
.notif-row:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--app-color-primary-focus-ring), inset 4px 0 0 var(--app-color-primary-border-strong);
}
.notif-row.unread {
  background: color-mix(in oklab, var(--notif-row-active-bg) 32%, transparent);
  border-color: color-mix(in oklab, var(--app-color-primary-border) 30%, var(--notif-panel-border));
}
.notif-row.unread::before {
  opacity: 1;
}
.notif-leading {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 36px;
  min-width: 36px;
  padding-top: 0;
}
.notif-dot {
  position: absolute;
  top: 1px;
  right: 0;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--app-color-primary);
  flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--notif-panel-bg);
}
.notif-type {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--app-color-text-high);
  background: var(--notif-avatar-bg);
  border: 1px solid color-mix(in oklab, var(--notif-avatar-border) 86%, transparent);
}
.notif-type--image {
  background: var(--notif-avatar-bg) !important;
  color: var(--app-color-text-high);
}
.notif-avatar-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.notif-avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.notif-type[data-type=info] {
  background: var(--notif-type-info-bg);
  color: var(--notif-type-info);
}
.notif-type[data-type=success] {
  background: var(--notif-type-success-bg);
  color: var(--notif-type-success);
}
.notif-type[data-type=warning] {
  background: var(--notif-type-warning-bg);
  color: var(--notif-type-warning);
}
.notif-type[data-type=error] {
  background: var(--notif-type-error-bg);
  color: var(--notif-type-error);
}
.notif-type[data-type=system] {
  background: var(--notif-type-system-bg);
  color: var(--notif-type-system);
}
.notif-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}
.notif-eyebrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.notif-eyebrow-left,
.notif-eyebrow-right {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.notif-context {
  display: inline-flex;
  align-items: center;
  min-height: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--app-color-primary-text);
  font-weight: 800;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.notif-source-pill,
.notif-time-badge {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0 7px;
  border: 1px solid var(--notif-border-soft);
  border-radius: 999px;
  background: color-mix(in oklab, var(--notif-surface-soft) 92%, transparent);
  color: var(--app-color-text-body);
  font-size: 9.25px;
  font-weight: 700;
  letter-spacing: 0;
}
.notif-context + .notif-source-pill::before {
  content: none;
}
.notif-time-badge {
  color: var(--app-color-text-soft);
  font-weight: 700;
  white-space: nowrap;
}
.notif-actor {
  color: var(--app-color-text-high);
  font-weight: 700;
}
.notif-headings {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.notif-title {
  font-size: 12.4px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--app-color-text-high);
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-transform: none !important;
}
.notif-summary {
  font-size: 10.2px;
  font-weight: 700;
  color: var(--app-color-text-body);
  line-height: 1.22;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-transform: none !important;
}
.notif-message {
  margin-top: 1px;
  font-size: 9.8px;
  color: var(--app-color-text-muted);
  line-height: 1.28;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.notif-target {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 0;
  color: var(--app-color-text-soft);
  font-size: 9.5px;
  font-weight: 700;
}
.notif-target--inline {
  margin-top: 0;
}
.notif-target span {
  display: inline-flex;
  align-items: center;
  min-height: 17px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid var(--notif-border-soft);
  background: color-mix(in oklab, var(--notif-surface-soft) 78%, transparent);
}
.notif-target span:first-child {
  color: var(--app-color-primary-text);
  border-color: color-mix(in oklab, var(--app-color-primary-border) 52%, transparent);
  background: color-mix(in oklab, var(--app-color-primary-bg) 72%, transparent);
}
.notif-footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
  margin-top: 0;
  padding-top: 2px;
  border-top: none;
}
.notif-footer-copy {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-size: 9.4px;
  color: var(--app-color-text-muted);
}
.notif-footer-copy--meta {
  gap: 6px;
}
.notif-footer--action-only {
  justify-content: flex-end;
}
.notif-actor-prefix {
  color: var(--app-color-text-muted);
  font-weight: 600;
}
.notif-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 16px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 8.9px;
  font-weight: 700;
  white-space: nowrap;
  background: color-mix(in oklab, var(--app-color-warning-bg) 76%, transparent);
  color: var(--app-color-warning-text);
}
.notif-chip[data-priority=medium] {
  background: color-mix(in oklab, var(--app-color-pill-surface) 84%, transparent);
  color: var(--app-color-pill-text);
}
.notif-chip[data-priority=high] {
  background: var(--app-color-warning-bg);
  color: var(--app-color-warning-text);
}
.notif-chip[data-priority=urgent] {
  background: var(--app-color-danger-bg);
  color: var(--app-color-danger-text);
}
.notif-action {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 18px;
  padding: 0 1px;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--app-color-primary-text);
  font-size: 9.8px;
  font-weight: 800;
}
.notif-footer .notif-actor {
  color: var(--app-color-text-body);
  font-size: 9.2px;
  font-weight: 700;
  white-space: nowrap;
}
.notif-action-arrow {
  opacity: 0.65;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.notif-row:hover .notif-action-arrow {
  transform: translateX(2px);
  opacity: 0.9;
}
.notif-empty {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  padding: 13px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--app-color-outline) 42%, transparent);
  background: var(--app-shell-control-bg);
  box-shadow: none;
  color: var(--app-color-text-muted);
}
.notif-empty--ready {
  border-color: color-mix(in srgb, var(--app-color-success) 24%, var(--app-color-outline));
  background: color-mix(in srgb, var(--app-color-success-bg) 22%, var(--app-shell-control-bg));
}
.notif-empty--loading {
  border-color: color-mix(in srgb, var(--app-color-primary-border) 38%, var(--app-color-outline));
  background: color-mix(in srgb, var(--app-color-primary-bg) 18%, var(--app-shell-control-bg));
}
.notif-empty--error {
  border-color: color-mix(in srgb, var(--app-color-danger-text) 28%, var(--app-color-outline));
  background: color-mix(in srgb, var(--app-color-danger-bg, #3a1717) 22%, var(--app-shell-control-bg));
}
.notif-empty-copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.notif-empty i,
.notif-empty .notif-empty-icon {
  width: 16px;
  height: 16px;
  display: block;
  flex: 0 0 auto;
  color: var(--app-color-primary-text);
}
.notif-empty--ready .notif-empty-icon {
  color: var(--app-color-success);
}
.notif-empty--error .notif-empty-icon {
  color: var(--app-color-danger-text);
}
.notif-empty--loading .notif-empty-icon {
  color: var(--app-color-primary-text);
  animation: notif-empty-pulse 1.25s ease-in-out infinite;
}
.notif-empty-title {
  font-size: 11.75px;
  font-weight: 800;
  color: var(--app-color-text-high);
}
.notif-empty-text {
  font-size: 10.25px;
  color: var(--app-color-text-muted);
}
.notif-empty-action {
  align-self: flex-start;
  margin-top: 2px;
}
@keyframes notif-empty-pulse {
  0%, 100% {
    opacity: 0.72;
    transform: scale(0.96);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}
.notif-header-meta {
  margin-left: 0;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--notif-border-soft);
  background: color-mix(in oklab, var(--notif-surface-soft) 92%, transparent);
  color: var(--app-color-text-body);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.notif-header-meta--quiet {
  background: var(--app-shell-control-bg);
  color: var(--app-color-text-muted);
}
.notif-header-meta--error {
  color: var(--app-color-danger-text);
  border-color: color-mix(in srgb, var(--app-color-danger-text) 24%, var(--app-color-outline));
  background: color-mix(in srgb, var(--app-color-danger-bg, #3a1717) 72%, transparent);
}
.notifications-feed-state {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  margin-top: 2px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--app-color-outline);
  background: var(--app-shell-control-bg);
  color: var(--app-color-text-muted);
  font-size: 10.75px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
}
.notifications-feed-state--loading {
  color: var(--app-color-primary-text);
  border-color: var(--app-color-primary-border);
}
@media (max-width: 720px) {
  .notifications-header {
    padding: 12px 12px 10px;
  }
  .notifications-body {
    padding: 8px;
  }
  .notifications-body--scrollable {
    padding-right: 10px;
  }
  .notifications-footer {
    flex-direction: column;
    align-items: stretch;
    padding: 9px;
  }
}
body.team-tasks-page main.content,
body.team-tasks-page .content,
main.content:has(task-future),
.content:has(task-future),
main.content:has(team-tasks),
.content:has(team-tasks) {
  overflow: hidden !important;
  padding-bottom: 0 !important;
  padding-inline: 0 !important;
}
body.team-tasks-page main.content > feature-task-future-page,
body.team-tasks-page .content > feature-task-future-page,
body.team-tasks-page main.content > feature-team-tasks-page,
body.team-tasks-page .content > feature-team-tasks-page,
main.content:has(task-future) > feature-task-future-page,
.content:has(task-future) > feature-task-future-page,
main.content:has(team-tasks) > feature-team-tasks-page,
.content:has(team-tasks) > feature-team-tasks-page,
main.content:has(task-future) > router-outlet + feature-task-future-page,
.content:has(task-future) > router-outlet + feature-task-future-page,
main.content:has(team-tasks) > router-outlet + feature-team-tasks-page,
.content:has(team-tasks) > router-outlet + feature-team-tasks-page,
body.team-tasks-page feature-task-future-page > task-future,
body.team-tasks-page feature-team-tasks-page > team-tasks,
main.content:has(task-future) task-future,
.content:has(task-future) task-future,
main.content:has(team-tasks) team-tasks,
.content:has(team-tasks) team-tasks {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
body.team-tasks-page .tasks-page.clickup-page,
main.content:has(task-future) .tasks-page.clickup-page,
.content:has(task-future) .tasks-page.clickup-page,
main.content:has(team-tasks) .tasks-page.clickup-page,
.content:has(team-tasks) .tasks-page.clickup-page {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  padding-bottom: 0 !important;
}
body.team-tasks-page .tasks-page.clickup-page > .tasks-scroll,
main.content:has(task-future) .tasks-page.clickup-page > .tasks-scroll,
.content:has(task-future) .tasks-page.clickup-page > .tasks-scroll,
main.content:has(team-tasks) .tasks-page.clickup-page > .tasks-scroll,
.content:has(team-tasks) .tasks-page.clickup-page > .tasks-scroll {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  padding-bottom: 0 !important;
}
body.team-tasks-page .tasks-page.clickup-page > .tasks-scroll > .tasks-body-scroll,
main.content:has(task-future) .tasks-page.clickup-page > .tasks-scroll > .tasks-body-scroll,
.content:has(task-future) .tasks-page.clickup-page > .tasks-scroll > .tasks-body-scroll,
main.content:has(team-tasks) .tasks-page.clickup-page > .tasks-scroll > .tasks-body-scroll,
.content:has(team-tasks) .tasks-page.clickup-page > .tasks-scroll > .tasks-body-scroll {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}
body.team-tasks-page .tasks-page.clickup-page .tasks-body-scroll.board-mode > .workspace-shell.cu-workspace,
body.team-tasks-page .tasks-page.clickup-page .tasks-body-scroll.board-mode > .workspace-shell.cu-workspace.card,
main.content:has(task-future) .tasks-page.clickup-page .tasks-body-scroll.board-mode > .workspace-shell.cu-workspace,
.content:has(task-future) .tasks-page.clickup-page .tasks-body-scroll.board-mode > .workspace-shell.cu-workspace,
main.content:has(team-tasks) .tasks-page.clickup-page .tasks-body-scroll.board-mode > .workspace-shell.cu-workspace,
.content:has(team-tasks) .tasks-page.clickup-page .tasks-body-scroll.board-mode > .workspace-shell.cu-workspace {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}
body.team-tasks-page .tasks-page.clickup-page,
main.content:has(task-future) .tasks-page.clickup-page,
.content:has(task-future) .tasks-page.clickup-page,
main.content:has(team-tasks) .tasks-page.clickup-page,
.content:has(team-tasks) .tasks-page.clickup-page {
  gap: 0 !important;
}
body.team-tasks-page .tasks-page.clickup-page .tasks-body-scroll.board-mode > .workspace-shell.cu-workspace > .workspace-main,
body.team-tasks-page .tasks-page.clickup-page .tasks-body-scroll.board-mode > .workspace-shell.cu-workspace.card > .workspace-main,
main.content:has(task-future) .tasks-page.clickup-page .tasks-body-scroll.board-mode > .workspace-shell.cu-workspace > .workspace-main,
.content:has(task-future) .tasks-page.clickup-page .tasks-body-scroll.board-mode > .workspace-shell.cu-workspace > .workspace-main,
main.content:has(team-tasks) .tasks-page.clickup-page .tasks-body-scroll.board-mode > .workspace-shell.cu-workspace > .workspace-main,
.content:has(team-tasks) .tasks-page.clickup-page .tasks-body-scroll.board-mode > .workspace-shell.cu-workspace > .workspace-main {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  padding: 0 !important;
}
body.team-tasks-page .tasks-page.clickup-page .tasks-body-scroll.board-mode > .workspace-shell.cu-workspace > .workspace-main > app-tasks-board-view,
body.team-tasks-page .tasks-page.clickup-page .tasks-body-scroll.board-mode > .workspace-shell.cu-workspace.card > .workspace-main > app-tasks-board-view,
main.content:has(task-future) .tasks-page.clickup-page .tasks-body-scroll.board-mode > .workspace-shell.cu-workspace > .workspace-main > app-tasks-board-view,
.content:has(task-future) .tasks-page.clickup-page .tasks-body-scroll.board-mode > .workspace-shell.cu-workspace > .workspace-main > app-tasks-board-view,
main.content:has(team-tasks) .tasks-page.clickup-page .tasks-body-scroll.board-mode > .workspace-shell.cu-workspace > .workspace-main > app-tasks-board-view,
.content:has(team-tasks) .tasks-page.clickup-page .tasks-body-scroll.board-mode > .workspace-shell.cu-workspace > .workspace-main > app-tasks-board-view {
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
}
body.team-tasks-page .tasks-page.clickup-page .tasks-body-scroll.board-mode app-tasks-board-view .board-shell,
main.content:has(task-future) .tasks-page.clickup-page .tasks-body-scroll.board-mode app-tasks-board-view .board-shell,
.content:has(task-future) .tasks-page.clickup-page .tasks-body-scroll.board-mode app-tasks-board-view .board-shell,
main.content:has(team-tasks) .tasks-page.clickup-page .tasks-body-scroll.board-mode app-tasks-board-view .board-shell,
.content:has(team-tasks) .tasks-page.clickup-page .tasks-body-scroll.board-mode app-tasks-board-view .board-shell {
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}
body.team-tasks-page .tasks-page.clickup-page > .tasks-scroll,
main.content:has(task-future) .tasks-page.clickup-page > .tasks-scroll,
.content:has(task-future) .tasks-page.clickup-page > .tasks-scroll,
main.content:has(team-tasks) .tasks-page.clickup-page > .tasks-scroll,
.content:has(team-tasks) .tasks-page.clickup-page > .tasks-scroll {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  padding-inline: 0 !important;
  scrollbar-gutter: auto !important;
}
body.team-tasks-page .tasks-page.clickup-page > .tasks-scroll > .cu-header,
main.content:has(task-future) .tasks-page.clickup-page > .tasks-scroll > .cu-header,
.content:has(task-future) .tasks-page.clickup-page > .tasks-scroll > .cu-header,
main.content:has(team-tasks) .tasks-page.clickup-page > .tasks-scroll > .cu-header,
.content:has(team-tasks) .tasks-page.clickup-page > .tasks-scroll > .cu-header {
  flex: 0 0 auto !important;
}
body.team-tasks-page .tasks-page.clickup-page > .tasks-scroll > .tasks-body-scroll,
main.content:has(task-future) .tasks-page.clickup-page > .tasks-scroll > .tasks-body-scroll,
.content:has(task-future) .tasks-page.clickup-page > .tasks-scroll > .tasks-body-scroll,
main.content:has(team-tasks) .tasks-page.clickup-page > .tasks-scroll > .tasks-body-scroll,
.content:has(team-tasks) .tasks-page.clickup-page > .tasks-scroll > .tasks-body-scroll {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}
body.team-tasks-page .tasks-page.clickup-page > .tasks-scroll > .tasks-body-scroll.board-mode > .workspace-shell.cu-workspace,
body.team-tasks-page .tasks-page.clickup-page > .tasks-scroll > .tasks-body-scroll.board-mode > .workspace-shell.cu-workspace.card,
main.content:has(task-future) .tasks-page.clickup-page > .tasks-scroll > .tasks-body-scroll.board-mode > .workspace-shell.cu-workspace,
.content:has(task-future) .tasks-page.clickup-page > .tasks-scroll > .tasks-body-scroll.board-mode > .workspace-shell.cu-workspace,
main.content:has(team-tasks) .tasks-page.clickup-page > .tasks-scroll > .tasks-body-scroll.board-mode > .workspace-shell.cu-workspace,
.content:has(team-tasks) .tasks-page.clickup-page > .tasks-scroll > .tasks-body-scroll.board-mode > .workspace-shell.cu-workspace {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}
body.team-tasks-page .clickup-page .list-grid-scroll::-webkit-scrollbar,
body.team-tasks-page .clickup-page app-status-list .tsl-shared-scroll::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
}
body.team-tasks-page .clickup-page .list-grid-scroll::-webkit-scrollbar-thumb,
body.team-tasks-page .clickup-page app-status-list .tsl-shared-scroll::-webkit-scrollbar-thumb {
  background: rgb(var(--border-strong) / 0.72) !important;
  border-radius: 999px !important;
}
team-tasks .tasks-body-scroll.table-mode .table-area {
  position: relative !important;
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}
.cdk-drag-preview.task-card-drag-preview,
.cdk-drag-preview.task-card {
  width: 246px !important;
  min-width: 246px !important;
  max-width: 246px !important;
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  border: 1px solid #282828 !important;
  background: #191919 !important;
  color: rgb(238 238 238) !important;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.14) !important;
  rotate: 0deg !important;
  transform-origin: 50% 50% !important;
  pointer-events: none !important;
  --task-icon-muted: #6e6e6e;
  --task-icon-outline: rgb(110 110 110 / 0.18);
  --task-icon-outline-width: 1px;
  --task-icon-outline-radius: 6px;
}
.cdk-drag-preview.task-card-drag-preview.task-card-two-lines,
.cdk-drag-preview.task-card.task-card-two-lines {
  height: 92px !important;
  min-height: 92px !important;
  max-height: 92px !important;
}
.cdk-drag-preview.task-card-drag-preview .task-card-inner,
.cdk-drag-preview.task-card .task-card-inner {
  width: 246px !important;
  background: inherit !important;
  color: inherit !important;
  border-radius: inherit !important;
}
.cdk-drag-preview.task-card-drag-preview .task-title,
.cdk-drag-preview.task-card .task-title {
  width: 224px !important;
  display: flow-root !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  white-space: normal !important;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  text-align: left !important;
  color: inherit !important;
}
.cdk-drag-preview.task-card-drag-preview.task-card-two-lines .task-title,
.cdk-drag-preview.task-card.task-card-two-lines .task-title {
  height: 40px !important;
}
body.light-mode .cdk-drag-preview.task-card-drag-preview,
body.light-mode .cdk-drag-preview.task-card,
html[data-theme]:not([data-theme=dark]):not([data-theme=aurora]) .cdk-drag-preview.task-card-drag-preview,
html[data-theme]:not([data-theme=dark]):not([data-theme=aurora]) .cdk-drag-preview.task-card,
html[data-theme=light] .cdk-drag-preview.task-card-drag-preview,
html[data-theme=light] .cdk-drag-preview.task-card {
  border-color: rgb(var(--border) / 0.54) !important;
  background:
    linear-gradient(
      180deg,
      rgb(255 255 255) 0%,
      rgb(247 249 252) 100%) !important;
  color: rgb(20 24 31) !important;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.08) !important;
  --task-icon-muted: #8d8d8d;
  --task-icon-outline: rgb(141 141 141 / 0.16);
}
body.light-mode .cdk-drag-preview.task-card-drag-preview .task-title,
body.light-mode .cdk-drag-preview.task-card .task-title,
html[data-theme]:not([data-theme=dark]):not([data-theme=aurora]) .cdk-drag-preview.task-card-drag-preview .task-title,
html[data-theme]:not([data-theme=dark]):not([data-theme=aurora]) .cdk-drag-preview.task-card .task-title,
html[data-theme=light] .cdk-drag-preview.task-card-drag-preview .task-title,
html[data-theme=light] .cdk-drag-preview.task-card .task-title {
  color: rgb(17 24 39) !important;
}
body.dark-mode .cdk-drag-preview.task-card-drag-preview,
body.dark-mode .cdk-drag-preview.task-card,
html[data-theme=dark] .cdk-drag-preview.task-card-drag-preview,
html[data-theme=dark] .cdk-drag-preview.task-card,
html:not([data-theme]) .cdk-drag-preview.task-card-drag-preview,
html:not([data-theme]) .cdk-drag-preview.task-card {
  border-color: #282828 !important;
  background: #191919 !important;
  color: rgb(238 238 238) !important;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.14) !important;
  --task-icon-muted: #6e6e6e;
  --task-icon-outline: rgb(110 110 110 / 0.18);
}
body.dark-mode .cdk-drag-preview.task-card-drag-preview .task-title,
body.dark-mode .cdk-drag-preview.task-card .task-title,
html[data-theme=dark] .cdk-drag-preview.task-card-drag-preview .task-title,
html[data-theme=dark] .cdk-drag-preview.task-card .task-title,
html:not([data-theme]) .cdk-drag-preview.task-card-drag-preview .task-title,
html:not([data-theme]) .cdk-drag-preview.task-card .task-title {
  color: rgb(238 238 238) !important;
}
header.bg-bar .hdr-left {
  transition: transform var(--app-shell-sidebar-motion-duration, var(--app-shell-motion-duration-slow)) var(--app-shell-motion-ease), opacity var(--app-shell-motion-duration-fast) ease;
  transform-origin: center left;
}
.sidebar {
  transition:
    width var(--app-shell-sidebar-motion-duration, var(--app-shell-motion-duration-slow)) var(--app-shell-motion-ease),
    background-color var(--app-shell-motion-duration-fast) ease,
    box-shadow var(--app-shell-motion-duration-fast) ease;
}
.sidebar-inner {
  transform: translateX(0);
  transition:
    padding var(--app-shell-motion-duration-fast) var(--app-shell-motion-ease),
    opacity var(--app-shell-motion-duration-fast) ease,
    transform var(--app-shell-sidebar-motion-duration, var(--app-shell-motion-duration-slow)) var(--app-shell-motion-ease);
}
.sidebar-bottom {
  transition:
    padding var(--app-shell-motion-duration-fast) var(--app-shell-motion-ease),
    width var(--app-shell-sidebar-motion-duration, var(--app-shell-motion-duration-slow)) var(--app-shell-motion-ease),
    inset-inline-start var(--app-shell-sidebar-motion-duration, var(--app-shell-motion-duration-slow)) var(--app-shell-motion-ease),
    bottom var(--app-shell-motion-duration-fast) var(--app-shell-motion-ease),
    transform var(--app-shell-motion-duration-fast) var(--app-shell-motion-ease),
    opacity var(--app-shell-motion-duration-fast) ease;
}
.brand-shell {
  overflow: hidden;
  transition:
    min-height var(--app-shell-motion-duration-fast) var(--app-shell-motion-ease),
    width var(--app-shell-sidebar-motion-duration, var(--app-shell-motion-duration-slow)) var(--app-shell-motion-ease),
    padding-inline var(--app-shell-motion-duration-fast) var(--app-shell-motion-ease),
    opacity var(--app-shell-motion-duration-fast) ease,
    transform var(--app-shell-sidebar-motion-duration, var(--app-shell-motion-duration-slow)) var(--app-shell-motion-ease);
}
.brand-full,
.brand-mark {
  transform-origin: center left;
  transition:
    opacity var(--app-shell-motion-duration-fast) ease,
    transform var(--app-shell-sidebar-motion-duration, var(--app-shell-motion-duration-slow)) var(--app-shell-motion-ease),
    max-inline-size var(--app-shell-sidebar-motion-duration, var(--app-shell-motion-duration-slow)) var(--app-shell-motion-ease);
}
.side-fab {
  transition:
    color var(--app-shell-motion-duration-fast) ease,
    opacity var(--app-shell-motion-duration-fast) ease,
    filter var(--app-shell-motion-duration-fast) ease,
    transform var(--app-shell-motion-duration-fast) var(--app-shell-motion-ease);
}
.side-fab-icon,
.side-fab-icon .sidebar-fab-icon-svg {
  transition: opacity var(--app-shell-motion-duration-fast) ease, transform var(--app-shell-motion-duration-fast) var(--app-shell-motion-ease);
}
.sidebar.is-collapsed .side-fab {
  transform: translateX(8px) scale(0.82);
  filter: none;
}
body:is(.tender-projects-page, .tender-suppliers-page, .tender-material-classification-page, .tender-pricing-page, .tender-boq-page, .team-tasks-page, .crm-grid-list-page, .settings-page) .bg-app.sidebar-transitioning .shell,
body:is(.tender-projects-page, .tender-suppliers-page, .tender-material-classification-page, .tender-pricing-page, .tender-boq-page, .team-tasks-page, .crm-grid-list-page, .settings-page) .bg-app.sidebar-transitioning .sidebar,
body:is(.tender-projects-page, .tender-suppliers-page, .tender-material-classification-page, .tender-pricing-page, .tender-boq-page, .team-tasks-page, .crm-grid-list-page, .settings-page) .bg-app.sidebar-transitioning header.bg-bar .hdr,
body:is(.tender-projects-page, .tender-suppliers-page, .tender-material-classification-page, .tender-pricing-page, .tender-boq-page, .team-tasks-page, .crm-grid-list-page, .settings-page) .bg-app.sidebar-transitioning .shell::before {
  transition-duration: 0s !important;
}
body.salary-reports-page .content {
  contain: layout paint;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.area-trigger,
.area-page-item,
.account-pill {
  transition:
    background-color var(--app-shell-motion-duration-fast) ease,
    border-color var(--app-shell-motion-duration-fast) ease,
    color var(--app-shell-motion-duration-fast) ease,
    box-shadow var(--app-shell-motion-duration-fast) ease,
    opacity var(--app-shell-motion-duration-fast) ease,
    transform var(--app-shell-motion-duration-fast) var(--app-shell-motion-ease);
}
.area-trigger__lead {
  max-width: 100%;
  transition:
    max-width var(--app-shell-sidebar-motion-duration, var(--app-shell-motion-duration-slow)) var(--app-shell-motion-ease),
    gap var(--app-shell-motion-duration-fast) var(--app-shell-motion-ease),
    opacity var(--app-shell-motion-duration-fast) ease,
    transform var(--app-shell-motion-duration-fast) var(--app-shell-motion-ease);
}
.area-trigger__label,
.area-page-item .label {
  display: block;
  transform-origin: left center;
  transition:
    max-width var(--app-shell-sidebar-motion-duration, var(--app-shell-motion-duration-slow)) var(--app-shell-motion-ease),
    opacity var(--app-shell-motion-duration-fast) ease,
    transform var(--app-shell-motion-duration-fast) var(--app-shell-motion-ease),
    margin var(--app-shell-motion-duration-fast) var(--app-shell-motion-ease),
    visibility 0s linear 0s;
}
.area-page-item .label {
  max-width: 140px;
  overflow: hidden;
}
.area-trigger__tail {
  max-width: 24px;
  transition:
    max-width var(--app-shell-motion-duration-fast) var(--app-shell-motion-ease),
    opacity var(--app-shell-motion-duration-fast) ease,
    transform var(--app-shell-motion-duration-fast) var(--app-shell-motion-ease),
    visibility 0s linear 0s;
}
.account-pill {
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.25s ease,
    opacity var(--app-shell-motion-duration-fast) ease,
    transform var(--app-shell-motion-duration-fast) var(--app-shell-motion-ease);
}
.account-pill .meta {
  max-width: 140px;
  overflow: hidden;
  transition:
    max-width var(--app-shell-sidebar-motion-duration, var(--app-shell-motion-duration-slow)) var(--app-shell-motion-ease),
    opacity var(--app-shell-motion-duration-fast) ease,
    transform var(--app-shell-motion-duration-fast) var(--app-shell-motion-ease),
    visibility 0s linear 0s;
}
.account-pill .caret {
  max-width: 18px;
  min-width: 13px;
  flex: 0 0 13px;
  overflow: hidden;
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    color 0.15s ease,
    opacity 0.2s ease,
    max-width var(--app-shell-motion-duration-fast) var(--app-shell-motion-ease),
    min-width var(--app-shell-motion-duration-fast) var(--app-shell-motion-ease),
    flex-basis var(--app-shell-motion-duration-fast) var(--app-shell-motion-ease),
    visibility 0s linear 0s;
}
.sidebar:not(.is-collapsed) .area-trigger__label,
.sidebar:not(.is-collapsed) .area-page-item .label,
.sidebar:not(.is-collapsed) .account-pill .meta,
.sidebar:not(.is-collapsed) .account-pill .caret {
  visibility: visible;
}
.sidebar.is-collapsed .menu-row .label,
.sidebar.is-collapsed .area-page-item .label,
.sidebar.is-collapsed .nav-item .label {
  display: block !important;
  width: 0 !important;
  max-width: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  opacity: 0;
  transform: translateX(-10px);
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  transition:
    max-width var(--app-shell-sidebar-motion-duration, var(--app-shell-motion-duration-slow)) var(--app-shell-motion-ease),
    opacity var(--app-shell-motion-duration-fast) ease,
    transform var(--app-shell-motion-duration-fast) var(--app-shell-motion-ease),
    margin var(--app-shell-motion-duration-fast) var(--app-shell-motion-ease),
    visibility 0s linear var(--app-shell-motion-duration-fast);
}
.sidebar.is-collapsed .account-pill {
  transform: translateX(-50%) scale(0.98);
}
.sidebar.is-collapsed .account-pill:hover {
  transform: translateX(-50%) scale(1);
}
.sidebar.is-collapsed .account-pill .meta {
  max-width: 0;
  opacity: 0;
  transform: translateX(-10px);
  visibility: hidden;
  pointer-events: none;
}
.sidebar.is-collapsed .account-pill .caret {
  display: block !important;
  max-width: 0 !important;
  min-width: 0 !important;
  flex-basis: 0 !important;
  opacity: 0;
  transform: translateX(-8px);
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}
.sidebar.is-collapsed .account-pill .avatar .sidebar-account-icon {
  transition: transform var(--app-shell-sidebar-motion-duration, var(--app-shell-motion-duration-slow)) var(--app-shell-motion-ease), opacity var(--app-shell-motion-duration-fast) ease;
}
@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .sidebar-inner,
  .sidebar-bottom,
  .brand-shell,
  .brand-full,
  .brand-mark,
  .side-fab,
  .side-fab-icon,
  .side-fab-icon .sidebar-fab-icon-svg,
  .area-trigger,
  .area-trigger__lead,
  .area-trigger__label,
  .area-trigger__tail,
  .area-page-item,
  .area-page-item .label,
  .account-pill,
  .account-pill .meta,
  .account-pill .caret,
  .account-pill .avatar .sidebar-account-icon,
  header.bg-bar .hdr-left {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}
:root {
  --app-icon-default-size: 18px;
  --app-icon-outline-stroke: 0.95;
  --app-icon-motion-duration: 210ms;
}
.app-icon-host {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  line-height: 0;
  flex-shrink: 0;
}
.app-icon-svg {
  display: block;
  width: 100%;
  height: 100%;
}
.permissions-changed-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: perm-overlay-in 0.25s ease;
}
@keyframes perm-overlay-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.permissions-changed-dialog {
  background: var(--surface-1, #fff);
  border-radius: 16px;
  padding: 36px 40px;
  max-width: 420px;
  width: 90%;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22);
  animation: perm-dialog-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes perm-dialog-in {
  from {
    opacity: 0;
    transform: scale(0.88) translateY(16px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.permissions-changed-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary, #2563eb) 12%, transparent);
  color: var(--color-primary, #2563eb);
  margin: 0 auto 20px;
}
.permissions-changed-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-1, #111);
  margin: 0 0 10px;
}
.permissions-changed-body {
  font-size: 0.9rem;
  color: var(--text-2, #555);
  margin: 0 0 24px;
  line-height: 1.6;
}
.permissions-changed-countdown {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}
.permissions-changed-countdown-ring {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid var(--color-primary, #2563eb);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-primary, #2563eb);
  animation: perm-pulse 1s ease infinite;
}
@keyframes perm-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary, #2563eb) 30%, transparent);
  }
  50% {
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-primary, #2563eb) 0%, transparent);
  }
}
.permissions-changed-hint {
  font-size: 0.8rem;
  color: var(--text-3, #888);
  margin: 0;
}
[data-theme=dark] .permissions-changed-dialog {
  background: var(--surface-1, #1e1e2e);
}
[data-theme=dark] .permissions-changed-title {
  color: var(--text-1, #f0f0f0);
}
[data-theme=dark] .permissions-changed-body {
  color: var(--text-2, #aaa);
}
.bg-app .sidebar,
.bg-app .content,
.bg-app .brand-shell,
.bg-app .hdr,
.bg-app .global-search,
.bg-app .area-trigger,
.bg-app .menu-panel,
.bg-app .proj-page-tools,
.bg-app .proj-toolbar-btn,
.bg-app .proj-cu-chip {
  transition:
    width 180ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 180ms ease,
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease;
}
:is(hugeicons-icon svg, .app-icon-svg) [stroke]:not([stroke=none]) {
  stroke-width: var(--app-icon-outline-stroke) !important;
}
.bg-app .area-trigger:hover,
.bg-app .area-trigger:focus-visible,
.bg-app .proj-toolbar-btn:hover,
.bg-app .proj-cu-chip:hover {
  transform: translateX(2px);
}
.bg-app .menu-panel.animate-pop,
.bg-app .shared-page-design-panel.animate-pop {
  animation: engineers-panel-in 160ms cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: top right;
}
@keyframes engineers-panel-in {
  from {
    opacity: 0;
    transform: translateY(-5px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .bg-app *,
  .bg-app *::before,
  .bg-app *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}
.bg-app.sidebar-transitioning .side-fab {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  animation: none !important;
  transition: none !important;
}
.bg-app.sidebar-collapsed .side-fab,
.bg-app.sidebar-collapsed.sidebar-transitioning .side-fab,
.bg-app.sidebar-collapsed.sidebar-collapsed-reveal .side-fab,
.bg-app .sidebar.is-collapsed .side-fab {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  animation: none !important;
  transition: none !important;
  transform: none !important;
}
.bg-app .sidebar.is-collapsed .area-trigger__lead {
  position: absolute !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  display: grid !important;
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  place-items: center !important;
  opacity: 1 !important;
  transform: translate(-50%, -50%) !important;
  overflow: visible !important;
  pointer-events: none;
}
.bg-app .sidebar.is-collapsed .area-trigger .area-trigger__lead > hugeicons-icon.area-trigger__icon.sidebar-nav-icon {
  position: static !important;
  inset: auto !important;
  display: inline-grid !important;
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  place-items: center !important;
  color: currentColor !important;
  opacity: 1 !important;
  transform: none !important;
  z-index: 1;
}
.bg-app .sidebar.is-collapsed .area-trigger .area-trigger__lead > hugeicons-icon.area-trigger__icon.sidebar-nav-icon > svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  transform: none !important;
  overflow: visible;
}
.bg-app .sidebar.is-collapsed .area-trigger__lead > .area-trigger__label {
  position: absolute !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  overflow: hidden !important;
}
.bg-app .sidebar.is-collapsed .area-trigger__tail {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
}
.bg-app .sidebar.is-collapsed .area-trigger:hover .area-trigger__lead > hugeicons-icon.area-trigger__icon.sidebar-nav-icon,
.bg-app .sidebar.is-collapsed .area-trigger:focus-visible .area-trigger__lead > hugeicons-icon.area-trigger__icon.sidebar-nav-icon {
  transform: scale(1.06) !important;
}
.bg-app .brand-shell {
  justify-content: flex-start;
  width: var(--app-shell-sidebar-width);
  min-height: 56px;
  padding-inline: 16px 10px;
  overflow: hidden;
  transition:
    width var(--app-shell-sidebar-motion-duration, 280ms) var(--app-shell-motion-ease),
    min-height var(--app-shell-sidebar-motion-duration, 180ms) var(--app-shell-motion-ease),
    padding-inline var(--app-shell-sidebar-motion-duration, 180ms) var(--app-shell-motion-ease),
    transform var(--app-shell-sidebar-motion-duration, 180ms) var(--app-shell-motion-ease);
  transform: none;
}
.bg-app .brand-lockup {
  position: absolute;
  inset-inline-start: 16px;
  top: -1px;
  display: block;
  min-width: 0;
  opacity: 1;
  transform: translateX(0) scale(1);
  transform-origin: left center;
  transition: opacity 120ms ease, transform var(--app-shell-sidebar-motion-duration, 180ms) cubic-bezier(0.22, 1, 0.36, 1);
}
.bg-app .brand-lockup__wordmark {
  display: block;
  width: 210px;
  height: 50px;
  object-fit: contain;
  object-position: left center;
}
html[data-theme=light] .bg-app .brand-lockup__wordmark {
  content: url("./media/engineers-reference-wordmark-light.svg");
}
.bg-app .brand-lockup__copy {
  display: grid;
  gap: 4px;
  line-height: 1;
  text-transform: uppercase;
}
.bg-app .brand-lockup__copy strong {
  color: var(--app-color-text-high);
  font-size: 13.5px;
  font-weight: 850;
  letter-spacing: 0.055em;
  white-space: nowrap;
}
.bg-app .brand-lockup__copy span {
  color: var(--app-color-primary-text);
  font-size: 8.25px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.16em;
  white-space: nowrap;
}
.bg-app .brand-monogram {
  position: absolute;
  inset-inline-start: 50%;
  top: 50%;
  display: block;
  width: 48px;
  height: 48px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.72);
  transform-origin: center;
  pointer-events: none;
  transition: opacity 120ms ease, transform var(--app-shell-sidebar-motion-duration, 180ms) cubic-bezier(0.22, 1, 0.36, 1);
}
.bg-app .brand-monogram__mark {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
}
html[data-theme=light] .bg-app .brand-monogram__mark {
  content: url("./media/engineers-reference-mark-light.svg");
}
html[data-theme=light] #app-startup img {
  content: url("./media/engineers-reference-wordmark-light.svg");
}
@media (prefers-reduced-motion: reduce) {
  .bg-app .brand-lockup__wordmark,
  #app-startup img {
    content: url("./media/engineers-reference-wordmark-static.svg");
  }
  html[data-theme=light] .bg-app .brand-lockup__wordmark,
  html[data-theme=light] #app-startup img {
    content: url("./media/engineers-reference-wordmark-light-static.svg");
  }
  .bg-app .brand-monogram__mark {
    content: url("./media/engineers-reference-mark-static.svg");
  }
  html[data-theme=light] .bg-app .brand-monogram__mark {
    content: url("./media/engineers-reference-mark-light-static.svg");
  }
}
.bg-app .sidebar:not(.is-collapsed) .sidebar-inner {
  padding-top: 14px;
}
.bg-app.sidebar-collapsed header.bg-bar .hdr-left {
  transform: translateX(-12px);
}
.bg-app.sidebar-collapsed .brand-shell {
  display: flex;
  width: var(--sideW-collapsed);
  min-height: 52px;
  padding: 0;
  margin: 0;
}
.bg-app.sidebar-collapsed .brand-lockup {
  display: block;
  opacity: 0;
  transform: translateX(-8px) scale(0.26);
  pointer-events: none;
}
.bg-app.sidebar-collapsed .brand-monogram {
  opacity: 1;
  transform: translate(-50%, calc(-50% + 4px)) scale(1);
}
.bg-app.sidebar-collapsed .brand-toggle {
  z-index: 6;
}
.bg-app.sidebar-collapsed .hdr-left:hover .brand-monogram,
.bg-app.sidebar-collapsed .brand-shell:focus-within .brand-monogram,
.bg-app.sidebar-collapsed.sidebar-collapsed-reveal .brand-monogram {
  opacity: 0;
  transform: translate(-50%, calc(-50% + 4px)) scale(0.84);
}
.bg-app.sidebar-collapsed .hdr-left:hover .brand-toggle,
.bg-app.sidebar-collapsed .brand-shell:focus-within .brand-toggle,
.bg-app.sidebar-collapsed.sidebar-collapsed-reveal .brand-toggle {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.bg-app header.bg-bar .hdr-left {
  transition: transform var(--app-shell-sidebar-motion-duration, 280ms) var(--app-shell-motion-ease), opacity 120ms ease;
}
html[data-theme=light] .bg-app .brand-lockup__copy span {
  color: color-mix(in oklab, var(--app-color-primary) 68%, black 32%);
}
.bg-app .sidebar :is(.area-trigger, .area-page-item, .collapsed-area-flyout__item) {
  transition:
    background-color var(--app-shell-motion-duration-fast) ease,
    color var(--app-shell-motion-duration-fast) ease,
    opacity var(--app-shell-motion-duration-fast) ease,
    transform var(--app-shell-motion-duration) var(--app-shell-motion-ease),
    box-shadow var(--app-shell-motion-duration-fast) ease;
}
.bg-app .sidebar:not(.is-collapsed) .area-section.is-flat {
  gap: 2px;
}
.bg-app .sidebar:not(.is-collapsed) .area-section.is-flat > .area-group-trigger {
  display: none;
}
.bg-app .sidebar:not(.is-collapsed) .area-section.is-flat > .area-items {
  width: 100%;
  margin-inline-start: 0;
  padding-top: 0;
  gap: 2px;
}
.bg-app .sidebar:not(.is-collapsed) .area-section.is-flat .area-page-item {
  min-height: var(--h-org-pill);
  height: var(--h-org-pill);
  border-radius: 12px;
  gap: 11px;
  padding: 0 12px 0 10px;
  color: var(--app-color-text-body);
}
.bg-app .sidebar:not(.is-collapsed) .area-section.is-flat .area-page-item .sidebar-nav-icon {
  width: 18px;
  min-width: 18px;
  height: 18px;
}
.bg-app .sidebar :is(.shell-primary-item, .area-section.is-flat .area-page-item) .sidebar-nav-icon {
  color: currentColor !important;
}
.bg-app .sidebar:not(.is-collapsed) .area-section.is-flat .area-page-item .label {
  font-size: calc(var(--fs-nav) + 1px);
  font-weight: 700;
}
.bg-app .sidebar:not(.is-collapsed) .area-section.is-flat .area-page-item.active {
  background: transparent;
  color: var(--app-shell-nav-active-text);
  opacity: 1;
}
.bg-app .sidebar:not(.is-collapsed) :is(.shell-primary-item:not(.is-current), .area-section.is-flat .area-page-item:not(.active)) {
  --nav-rest-opacity: 0.64;
  color: var(--app-color-text-muted);
  opacity: 0.64;
}
.bg-app .sidebar:not(.is-collapsed) :is(.shell-primary-item:not(.is-current), .area-section.is-flat .area-page-item:not(.active)):is(:hover, :focus-visible) {
  color: var(--app-color-text-high);
  opacity: 1;
}
.bg-app .sidebar.is-collapsed .area-section.is-flat > .area-group-trigger {
  display: none;
}
.bg-app .sidebar.is-collapsed .area-section.is-flat > .area-items {
  width: 100%;
  max-height: 560px;
  margin-inline-start: 0;
  padding: 0;
  gap: 9px;
  align-items: center;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}
.bg-app .sidebar.is-collapsed .area-section.is-flat .area-page-item.active,
.bg-app .sidebar.is-collapsed .area-section.is-flat .area-page-item.active:hover {
  background: transparent;
  color: var(--app-shell-nav-active-text);
  opacity: 1;
  box-shadow: none;
}
.bg-app .sidebar.is-collapsed :is(.shell-primary-item:not(.is-current), .area-section.is-flat .area-page-item:not(.active)) {
  --nav-rest-opacity: 0.52;
  color: var(--app-color-text-muted);
  opacity: 0.52;
}
.bg-app .sidebar.is-collapsed :is(.shell-primary-item:not(.is-current), .area-section.is-flat .area-page-item:not(.active)):is(:hover, :focus-visible) {
  color: var(--app-color-text-high);
  opacity: 1;
}
.bg-app .nav-list--areas {
  --indicator-x: 0px;
  --indicator-y: 0px;
  --indicator-width: 0px;
  --indicator-height: var(--h-org-pill);
  --indicator-duration: 180ms;
  position: relative;
  isolation: isolate;
}
.bg-app .sidebar-developer-footer {
  --developer-logo-filter: brightness(0) invert(1);
  --developer-logo-opacity: 0.92;
  --developer-logo-ease: cubic-bezier(0.23, 1, 0.32, 1);
  width: 100%;
  margin-top: auto;
  padding: 12px 8px 14px;
  display: grid;
  gap: 4px;
}
.bg-app .sidebar-developer-footer__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 4px 6px 4px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--app-color-text-body);
  text-decoration: none;
  transition: color var(--app-shell-motion-duration-fast) ease, transform var(--app-shell-motion-duration-fast) var(--app-shell-motion-ease);
}
.bg-app .sidebar-developer-footer__link::before {
  content: "";
  position: absolute;
  inset: -6px -2px;
  z-index: -1;
  border-radius: 16px;
  background:
    linear-gradient(
      90deg,
      rgb(255 255 255 / 0.08),
      transparent 68%);
  opacity: 0;
  transition: opacity var(--app-shell-motion-duration-fast) ease;
}
.bg-app .sidebar-developer-footer__link:hover,
.bg-app .sidebar-developer-footer__link:focus-visible {
  color: var(--app-color-text-high);
  transform: translateY(-1px);
}
.bg-app .sidebar-developer-footer__link:hover::before,
.bg-app .sidebar-developer-footer__link:focus-visible::before {
  opacity: 1;
}
.bg-app .sidebar-developer-footer__icon-shell {
  position: relative;
  display: grid;
  width: 30px;
  min-width: 30px;
  height: 30px;
  place-items: center;
  overflow: hidden;
  border-radius: 11px;
  background: transparent;
  perspective: 90px;
  transform-style: preserve-3d;
  isolation: isolate;
}
.bg-app .sidebar-developer-footer__icon-shell::before,
.bg-app .sidebar-developer-footer__icon-shell::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 9px;
  pointer-events: none;
}
.bg-app .sidebar-developer-footer__icon-shell::before {
  z-index: 0;
  background:
    linear-gradient(
      145deg,
      rgb(255 255 255 / 0.08),
      rgb(255 255 255 / 0.02));
  opacity: 0.42;
  transform: translateZ(-9px) scale(0.94);
  animation: developerLogoPlate 9s var(--developer-logo-ease) infinite;
}
.bg-app .sidebar-developer-footer__icon-shell::after {
  z-index: 1;
  inset: 3px;
  background:
    linear-gradient(
      110deg,
      transparent 0%,
      rgb(255 255 255 / 0.18) 46%,
      transparent 72%);
  opacity: 0;
  mix-blend-mode: screen;
  transform: translate3d(-18px, 0, 0) skewX(-14deg);
  filter: blur(0.5px);
  animation: developerLogoHandoff 9s var(--developer-logo-ease) infinite;
}
.bg-app .sidebar-developer-footer__logo {
  position: absolute;
  z-index: 2;
  width: 22px;
  height: 22px;
  object-fit: contain;
  opacity: 0;
  filter: var(--developer-logo-filter);
  transform-origin: center;
  backface-visibility: hidden;
  will-change:
    opacity,
    transform,
    filter;
  clip-path: inset(0 0 0 0 round 7px);
  animation: developerLogoCycle 9s var(--developer-logo-ease) infinite;
}
.bg-app .sidebar-developer-footer__logo--base {
  animation-delay: 0s;
}
.bg-app .sidebar-developer-footer__logo--mid {
  animation-delay: 3s;
}
.bg-app .sidebar-developer-footer__logo--top {
  animation-delay: 6s;
}
.bg-app .sidebar-developer-footer__logo--source {
  width: 20px;
  height: 20px;
  opacity: var(--developer-logo-opacity);
  animation: none;
  transform: none;
}
.bg-app .sidebar-developer-footer__copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.bg-app .sidebar-developer-footer__label {
  overflow: hidden;
  color: currentColor;
  font-size: calc(var(--fs-nav) + 0.5px);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bg-app .sidebar-developer-footer__rights {
  overflow: hidden;
  color: var(--app-color-text-muted);
  font-size: 9px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bg-app .sidebar-developer-footer__source {
  display: none;
}
.bg-app .sidebar-developer-footer__source:hover,
.bg-app .sidebar-developer-footer__source:focus-visible {
  color: inherit;
  transform: none;
}
.bg-app .sidebar-developer-footer__source-icon {
  position: relative;
  z-index: 2;
  width: 18px;
  min-width: 18px;
  height: 18px;
  color: var(--app-shell-accent);
  opacity: 0.92;
  filter: drop-shadow(0 0 10px rgb(139 225 14 / 0.22));
  animation: developerSourceIconPulse 9s var(--developer-logo-ease) infinite;
}
.bg-app .sidebar.is-collapsed .sidebar-developer-footer {
  display: grid;
  place-items: center;
  padding: 8px 0 10px;
}
.bg-app .sidebar.is-collapsed .sidebar-developer-footer__link {
  width: var(--app-collapsed-item-size);
  height: var(--app-collapsed-item-size);
  min-height: var(--app-collapsed-item-size);
  justify-content: center;
  padding: 0;
  border-radius: 0;
}
.bg-app .sidebar.is-collapsed .sidebar-developer-footer__icon-shell {
  width: 30px;
  min-width: 30px;
  height: 30px;
}
.bg-app .sidebar.is-collapsed .sidebar-developer-footer__copy {
  display: none;
}
html[data-theme=light] .bg-app .sidebar-developer-footer {
  --developer-logo-filter: brightness(0);
  --developer-logo-opacity: 0.94;
}
@keyframes developerLogoCycle {
  0%, 100% {
    opacity: 0;
    filter: var(--developer-logo-filter) blur(2.4px);
    clip-path: inset(0 44% 0 44% round 7px);
    transform: translate3d(0, 6px, -14px) rotateX(-22deg) rotateZ(-3deg) scale(0.82);
  }
  5% {
    opacity: 0;
    filter: var(--developer-logo-filter) blur(1.4px);
    clip-path: inset(0 28% 0 28% round 7px);
    transform: translate3d(0, 4px, -8px) rotateX(-14deg) rotateZ(-2deg) scale(0.9);
  }
  9% {
    opacity: calc(var(--developer-logo-opacity) * 0.84);
    filter: var(--developer-logo-filter) blur(0.6px);
    clip-path: inset(0 7% 0 7% round 7px);
    transform: translate3d(0, 1px, -3px) rotateX(-5deg) rotateZ(-0.5deg) scale(0.97);
  }
  11%, 23% {
    opacity: var(--developer-logo-opacity);
    filter: var(--developer-logo-filter) blur(0);
    clip-path: inset(0 0 0 0 round 7px);
    transform: translate3d(0, 0, 0) rotateX(0deg) scale(1);
  }
  27% {
    opacity: calc(var(--developer-logo-opacity) * 0.72);
    filter: var(--developer-logo-filter) blur(0.8px);
    clip-path: inset(0 8% 0 8% round 7px);
    transform: translate3d(0, -2px, -4px) rotateX(7deg) rotateZ(0.6deg) scale(0.96);
  }
  31% {
    opacity: 0;
    filter: var(--developer-logo-filter) blur(1.8px);
    clip-path: inset(0 30% 0 30% round 7px);
    transform: translate3d(0, -5px, -10px) rotateX(18deg) rotateZ(2deg) scale(0.88);
  }
  36%, 100% {
    opacity: 0;
    filter: var(--developer-logo-filter) blur(2.4px);
    clip-path: inset(0 44% 0 44% round 7px);
    transform: translate3d(0, -6px, -14px) rotateX(22deg) rotateZ(3deg) scale(0.82);
  }
}
@keyframes developerLogoPlate {
  0%, 100% {
    opacity: 0.18;
    transform: translateZ(-12px) scale(0.88) rotateX(10deg);
  }
  11%, 23% {
    opacity: 0.46;
    transform: translateZ(-7px) scale(0.96) rotateX(0deg);
  }
  36% {
    opacity: 0.18;
    transform: translateZ(-12px) scale(0.88) rotateX(-10deg);
  }
}
@keyframes developerLogoHandoff {
  0%, 6%, 24%, 100% {
    opacity: 0;
    transform: translate3d(-18px, 0, 0) skewX(-14deg);
  }
  8%, 28% {
    opacity: 0.78;
  }
  12%, 32% {
    opacity: 0;
    transform: translate3d(18px, 0, 0) skewX(-14deg);
  }
}
@keyframes developerSourceIconPulse {
  0%, 100% {
    opacity: 0.64;
    transform: translate3d(0, 2px, -8px) scale(0.9);
  }
  11%, 23% {
    opacity: 0.96;
    transform: translate3d(0, 0, 0) scale(1);
  }
  36% {
    opacity: 0.72;
    transform: translate3d(0, -1px, -4px) scale(0.95);
  }
}
@media (prefers-reduced-motion: reduce) {
  .bg-app .sidebar-developer-footer__icon-shell::before,
  .bg-app .sidebar-developer-footer__icon-shell::after,
  .bg-app .sidebar-developer-footer__logo,
  .bg-app .sidebar-developer-footer__source-icon {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
  .bg-app .sidebar-developer-footer__logo--base {
    opacity: var(--developer-logo-opacity);
    filter: var(--developer-logo-filter);
    transform: none;
  }
}
.bg-app .nav-list--areas > .indicator {
  position: absolute;
  inset: 0 auto auto 0;
  z-index: 0;
  width: var(--indicator-width);
  height: var(--indicator-height);
  border-radius: 12px;
  background: var(--app-shell-nav-active-bg);
  display: none;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(var(--indicator-x), var(--indicator-y), 0);
  transform-origin: center;
  contain: layout paint style;
  transition:
    transform var(--indicator-duration) cubic-bezier(0.22, 1, 0.36, 1),
    width var(--app-shell-motion-duration-fast) cubic-bezier(0.22, 1, 0.36, 1),
    height var(--app-shell-motion-duration-fast) cubic-bezier(0.22, 1, 0.36, 1);
}
.bg-app .nav-list--areas.has-selection > .indicator {
  opacity: 1;
}
.bg-app .nav-list--areas.indicator-initializing > .indicator {
  transition: opacity 120ms ease;
}
.bg-app .nav-list--areas.indicator-flowing > .indicator {
  filter: brightness(1.08);
}
.bg-app .nav-list--areas > :is(.shell-primary-item, .area-section) {
  position: relative;
  z-index: 1;
}
.bg-app .nav-list--areas > .shell-primary-item.is-current,
.bg-app .nav-list--areas > .shell-primary-item.is-current:hover {
  background: var(--app-shell-nav-active-bg);
  color: var(--app-shell-nav-active-text);
  opacity: 1;
}
.bg-app .nav-list--areas .indicator-trail {
  animation: none;
}
.bg-app .nav-list--areas .area-page-item.active,
.bg-app .nav-list--areas .area-page-item.active:hover {
  background: var(--app-shell-nav-active-bg) !important;
}
@keyframes sidebar-selection-lens-pass {
  0%, 100% {
    color: var(--app-color-text-muted);
    opacity: var(--nav-rest-opacity, 0.64);
    filter: brightness(1);
  }
  45%, 60% {
    color: var(--app-shell-nav-active-text);
    opacity: 1;
    filter: brightness(1.12);
  }
}
@media (prefers-reduced-motion: reduce) {
  .bg-app .nav-list--areas > .indicator {
    transition-duration: 1ms !important;
    filter: none !important;
  }
  .bg-app .nav-list--areas .indicator-trail {
    animation: none !important;
  }
}
.bg-app .area-trigger:hover,
.bg-app .area-trigger:focus-visible {
  transform: none;
}
.bg-app .sidebar :is(.area-trigger, .area-page-item, .side-fab):active {
  transform: scale(0.98);
}
.bg-app .sidebar :is(button, a):focus-visible,
.bg-app .collapsed-area-flyout a:focus-visible {
  outline: none;
  box-shadow: var(--app-shell-focus-ring) !important;
}
.bg-app .area-trigger__label,
.bg-app .area-page-item .label,
.bg-app .area-trigger__tail {
  transition:
    opacity var(--app-shell-motion-duration-fast) ease,
    transform var(--app-shell-motion-duration) var(--app-shell-motion-ease),
    color var(--app-shell-motion-duration-fast) ease,
    visibility 0s linear 0s;
}
.bg-app .area-trigger .sidebar-caret-icon {
  transform: rotate(0deg);
  transform-origin: center;
  transition:
    transform var(--app-shell-motion-duration) var(--app-shell-motion-ease),
    color var(--app-shell-motion-duration-fast) ease,
    opacity var(--app-shell-motion-duration-fast) ease;
}
.bg-app .area-trigger.is-expanded .sidebar-caret-icon {
  transform: rotate(180deg);
}
.bg-app .area-items,
.bg-app .area-items.is-open {
  transition:
    max-height var(--app-shell-motion-duration) var(--app-shell-motion-ease),
    opacity var(--app-shell-motion-duration-fast) ease,
    transform var(--app-shell-motion-duration) var(--app-shell-motion-ease),
    visibility 0s linear var(--app-shell-motion-duration-fast);
}
.bg-app .area-items.is-open {
  transition:
    max-height var(--app-shell-motion-duration) var(--app-shell-motion-ease),
    opacity var(--app-shell-motion-duration-fast) ease,
    transform var(--app-shell-motion-duration) var(--app-shell-motion-ease),
    visibility 0s linear 0s;
}
.bg-app .side-fab,
.bg-app .sidebar-collapsed-brand__toggle {
  transition:
    opacity var(--app-shell-motion-duration-fast) ease,
    transform var(--app-shell-motion-duration) var(--app-shell-motion-ease),
    color var(--app-shell-motion-duration-fast) ease,
    background-color var(--app-shell-motion-duration-fast) ease,
    box-shadow var(--app-shell-motion-duration-fast) ease;
}
.bg-app .side-fab:hover .side-fab-icon,
.bg-app .sidebar-collapsed-brand__toggle:hover .sidebar-toggle-icon {
  transform: scale(1.06);
}
.bg-app .side-fab-icon,
.bg-app .sidebar-toggle-icon,
.bg-app .collapsed-area-flyout__item-icon {
  transition:
    transform var(--app-shell-motion-duration) var(--app-shell-motion-ease),
    opacity var(--app-shell-motion-duration-fast) ease,
    color var(--app-shell-motion-duration-fast) ease;
}
.bg-app .collapsed-area-flyout {
  transform-origin: top left;
}
.bg-app .collapsed-area-flyout__item:hover .collapsed-area-flyout__item-icon,
.bg-app .collapsed-area-flyout__item:focus-visible .collapsed-area-flyout__item-icon {
  transform: translateX(2px);
}
.bg-app.sidebar-transitioning .sidebar :is(button, a, .area-trigger, .area-page-item) {
  pointer-events: none;
}
.bg-app.sidebar-collapsed.sidebar-transitioning .sidebar :is(.area-trigger, .area-page-item) {
  animation: none !important;
  transition: none !important;
}
.bg-app.sidebar-collapsed.sidebar-transitioning .sidebar :is(.area-trigger, .area-page-item) * {
  animation: none !important;
  transition: none !important;
}
.bg-app.sidebar-collapsed.sidebar-transitioning .nav-list--areas {
  animation: sidebar-control-collapse-down 200ms cubic-bezier(0.2, 0, 0, 1) both !important;
  will-change: transform;
}
@keyframes sidebar-control-collapse-down {
  from {
    transform: translateY(-52px);
  }
  to {
    transform: translateY(0);
  }
}
.bg-app.sidebar-transitioning .nav-list--areas > .indicator {
  opacity: 0 !important;
  transition: none !important;
}
.bg-app.sidebar-transitioning .nav-list--areas > .shell-primary-item.is-current,
.bg-app.sidebar-transitioning .nav-list--areas .area-page-item.active {
  background: var(--app-shell-nav-active-bg) !important;
}
@media (prefers-reduced-motion: reduce) {
  .bg-app .sidebar *,
  .bg-app .sidebar *::before,
  .bg-app .sidebar *::after,
  .bg-app .collapsed-area-flyout,
  .bg-app .collapsed-area-flyout * {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
    transition-delay: 0s !important;
  }
  .bg-app.sidebar-collapsed.sidebar-transitioning .nav-list--areas {
    animation: none !important;
  }
}
.app-stateful-icon {
  position: relative;
  display: inline-grid;
  width: var(--stateful-icon-size, 18px);
  min-width: var(--stateful-icon-size, 18px);
  height: var(--stateful-icon-size, 18px);
  place-items: center;
  color: currentColor;
}
.app-stateful-icon__layer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: opacity var(--app-icon-motion-duration) cubic-bezier(0.22, 1, 0.36, 1), transform var(--app-icon-motion-duration) cubic-bezier(0.22, 1, 0.36, 1);
}
.app-stateful-icon__outline {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.app-stateful-icon__outline svg [stroke]:not([stroke=none]) {
  stroke-width: var(--app-icon-outline-stroke) !important;
}
.app-stateful-icon[data-nav-icon=submit-salary-report] .app-stateful-icon__outline svg path:nth-of-type(3) {
  stroke-width: 1.45px !important;
}
.app-stateful-icon__filled {
  opacity: 0;
  visibility: hidden;
  transform: scale(1);
}
.app-stateful-icon.is-active .app-stateful-icon__outline,
.sidebar :is(a, button):hover .app-stateful-icon__outline,
.sidebar :is(a, button):focus-visible .app-stateful-icon__outline,
.indicator-trail .app-stateful-icon__outline {
  opacity: 0;
  visibility: hidden;
  transform: scale(1);
}
.app-stateful-icon.is-active .app-stateful-icon__filled,
.sidebar :is(a, button):hover .app-stateful-icon__filled,
.sidebar :is(a, button):focus-visible .app-stateful-icon__filled,
.indicator-trail .app-stateful-icon__filled {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .app-stateful-icon__layer {
    transition-duration: 1ms;
    transform: none !important;
  }
}

/* angular:styles/global:styles */
/*# sourceMappingURL=styles.css.map */