@font-face {
    font-family: "Actay";
    src: url("../fonts/actay/Actay-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Actay";
    src: url("../fonts/actay/Actay-RegularItalic.otf") format("opentype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Actay";
    src: url("../fonts/actay/ActayWide-Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --app-font-source-body: "Geologica", sans-serif;
    --app-font-source-ui: "Poppins", sans-serif;
    --app-font-source-finance: "Actay", var(--app-font-source-body);
    --font-family-base: var(--app-font-source-body);
    --font-family-alt: var(--app-font-source-ui);
    --app-font-body: var(--font-family-base);
    --app-font-heading: var(--font-family-base);
    --app-font-ui: var(--font-family-alt);
    --app-font-data: var(--font-family-base);
    --app-font-finance: var(--app-font-source-finance);
    --app-font-mono: Consolas, Monaco, "Courier New", monospace;
    --app-display-font: var(--app-font-heading);
    --app-control-font: var(--app-font-ui);
    --app-site-font: var(--app-font-body);
    --app-table-font: var(--app-font-data);
    --app-font: var(--app-font-body);
    --app-weight-light: 300;
    --app-weight-body: 400;
    --app-weight-regular: 450;
    --app-weight-book: 500;
    --app-weight-medium: 560;
    --app-weight-semibold: 600;
    --app-weight-ui: 620;
    --app-weight-label: 680;
    --app-weight-bold: 700;
    --app-weight-strong: 700;
    --app-weight-heading: 720;
    --app-weight-display: 740;
    --app-weight-extrabold: 800;
    --app-weight-heavy: 800;
    --app-weight-ultra: 850;
    --app-weight-black: 900;
    --app-text-weight: 450;
    --app-heading-weight: 720;
    --app-leading-flat: 1;
    --app-leading-micro: 1.02;
    --app-leading-metric: 1.04;
    --app-leading-display: 1.05;
    --app-leading-tight: 1.08;
    --app-leading-dense: 1.1;
    --app-leading-heading: 1.12;
    --app-leading-title: 1.15;
    --app-leading-heading-soft: 1.18;
    --app-leading-ui: 1.2;
    --app-leading-card: 1.22;
    --app-leading-data-soft: 1.25;
    --app-leading-note: 1.3;
    --app-leading-ui-roomy: 1.35;
    --app-leading-stack: 1.4;
    --app-leading-copy: 1.45;
    --app-leading-copy-soft: 1.5;
    --app-leading-copy-loose: 1.55;
    --app-leading-copy-wide: 1.6;
    --app-leading-copy-airy: 1.7;
    --app-leading-data: 1.28;
    --app-heading-tracking: -0.022em;
    --app-display-tracking: -0.024em;
    --app-heading-soft-tracking: -0.01em;
    --app-heading-subtle-tracking: -0.015em;
    --app-heading-tight-tracking: -0.03em;
    --app-control-weight: 620;
    --app-label-weight: 680;
    --app-body-tracking: 0;
    --app-body-soft-tracking: -0.01em;
    --app-ui-tracking: 0.01em;
    --app-value-tracking: 0.01em;
    --app-value-soft-tracking: 0.02em;
    --app-kicker-tracking: 0.06em;
    --app-kicker-wide-tracking: 0.1em;
    --app-label-tracking: 0.08em;
    --app-label-wide-tracking: 0.12em;
    --app-chip-tracking: 0.04em;
    --app-data-strong-tracking: -0.02em;
    --app-text: #2f2414;
    --app-text-strong: #172433;
    --app-text-soft: #5f6f82;
    --app-text-muted: #8894a3;
    --app-bg: #f7f2ea;
    --app-page-start: #eef3f8;
    --app-page-end: #fff8ee;
    --app-page-warm-start: #f7f7f8;
    --app-page-warm-end: #fff4df;
    --app-page-dark-start: #0f172a;
    --app-page-dark-end: #111827;
    --app-surface-card: rgba(255, 255, 255, 0.96);
    --app-surface-elevated: #ffffff;
    --app-surface-soft: #f8fbfd;
    --app-surface-muted: #eef4f8;
    --app-surface-dark: rgba(15, 23, 42, 0.88);
    --app-border-soft: rgba(23, 36, 51, 0.08);
    --app-border-mid: #d8e1ea;
    --app-border-strong: #c3d0dc;
    --app-border-warm: #e5d1ad;
    --app-accent-cool: #43b5de;
    --app-accent-cool-strong: #6f6bc8;
    --app-accent-deep: #21456d;
    --app-accent-warm: #f59e0b;
    --app-accent-warm-strong: #a85d00;
    --app-accent-warm-deep: #8a4b00;
    --app-accent-warm-soft: #e6d1ab;
    --app-shadow-soft: 0 18px 42px rgba(24, 35, 48, 0.08);
    --app-shadow-panel: 0 28px 70px rgba(24, 35, 48, 0.12);
    --app-shadow-hero: 0 30px 70px rgba(17, 24, 39, 0.16);
    --app-density: 0.94;
    --app-font-scale: 0.94;
    --app-space-scale: 0.9;
    --app-radius-scale: 0.92;
    --app-header-shell-max-width: 1380px;
    --app-page-shell-max-width: 1180px;
    --app-root-font-min: 13px;
    --app-root-font-fluid: calc(0.35vw + 11px);
    --app-root-font-max: 15px;
    --app-size-5xs: 7px;
    --app-size-4xs: 8px;
    --app-size-3xs: 9px;
    --app-size-3xs-plus: 9.5px;
    --app-size-2xs: 10px;
    --app-size-xs: 11px;
    --app-size-sm: 12px;
    --app-size-sm-plus: 12.5px;
    --app-size-md: 13px;
    --app-size-body: 14px;
    --app-size-lg: 15px;
    --app-size-xl: 16px;
    --app-size-xl-plus: 17px;
    --app-size-2xl: 18px;
    --app-size-2xl-plus: 19px;
    --app-size-3xl: 20px;
    --app-size-3xl-plus: 21px;
    --app-size-4xl: 22px;
    --app-size-5xl: 24px;
    --app-size-6xl: 26px;
    --app-size-7xl: 28px;
    --app-size-8xl: 30px;
    --app-size-9xl: 34px;
    --app-size-label: var(--app-size-xs);
    --app-size-kicker: var(--app-size-2xs);
    --app-size-chip: var(--app-size-xs);
    --app-size-copy-sm: var(--app-size-sm);
    --app-size-copy: var(--app-size-md);
    --app-size-ui: var(--app-size-body);
    --app-size-title-sm: var(--app-size-xl);
    --app-size-title: var(--app-size-2xl);
    --app-size-title-lg: var(--app-size-4xl);
    --app-size-display: var(--app-size-5xl);
    --app-page-kicker-size: var(--app-size-xs);
    --app-page-title-size: clamp(24px, 1.9vw, 30px);
    --app-page-subtitle-size: var(--app-size-lg);
    --app-section-title-size: var(--app-size-4xl);
    --app-card-title-size: var(--app-size-2xl-plus);
    --app-card-subtitle-size: var(--app-size-md);
    --app-page-content-max-width: 760px;
    --app-module-shell-gap: 18px;
    --app-module-grid-gap: 14px;
    --app-module-hero-padding-y: 24px;
    --app-module-hero-padding-x: 28px;
    --app-module-hero-radius: calc(var(--finance-cell-radius, 12px) + 18px);
    --app-module-card-padding: 18px;
    --app-module-card-padding-compact: 16px;
    --app-module-card-radius: calc(var(--finance-cell-radius, 12px) + 10px);
    --app-module-card-radius-xl: calc(var(--finance-cell-radius, 12px) + 16px);
    --app-module-surface-bg: linear-gradient(180deg, color-mix(in srgb, var(--app-surface-elevated) 96%, #ffffff) 0%, color-mix(in srgb, var(--app-page-warm-end) 74%, #fff6e9) 100%);
    --app-module-surface-bg-strong: color-mix(in srgb, var(--app-surface-soft) 88%, #ffffff);
    --app-module-surface-border: color-mix(in srgb, var(--app-border-warm) 72%, var(--app-border-soft));
    --app-module-surface-shadow: var(--app-shadow-soft);
    --app-module-surface-text: var(--app-text);
    --app-module-surface-title: var(--app-text-strong);
    --app-module-hero-bg: linear-gradient(145deg, var(--app-page-dark-start) 0%, color-mix(in srgb, var(--app-accent-warm-deep) 44%, var(--app-page-dark-end)) 58%, var(--app-accent-warm-deep) 100%);
    --app-module-hero-border: color-mix(in srgb, var(--app-accent-warm-soft) 18%, rgba(255,255,255,.22));
    --app-module-hero-shadow: var(--app-shadow-hero);
    --app-module-hero-text: #ffffff;
    --app-module-hero-muted: rgba(255, 255, 255, .74);
    --app-module-hero-soft-muted: rgba(255, 255, 255, .66);
    --app-module-control-surface: color-mix(in srgb, var(--app-surface-elevated) 90%, #ffffff);
    --app-module-control-border: color-mix(in srgb, var(--app-border-warm) 56%, var(--app-border-mid));
    --app-module-control-hover: color-mix(in srgb, var(--app-accent-warm-soft) 64%, #ffffff);
    --app-module-control-active: var(--app-accent-deep);
    --app-module-control-active-text: #ffffff;
    --app-module-panel-padding: var(--app-module-card-padding);
    --app-module-panel-padding-compact: var(--app-module-card-padding-compact);
    --app-module-panel-radius: var(--app-module-card-radius-xl);
    --app-module-kicker-font: var(--app-font-ui);
    --app-module-kicker-size: var(--app-page-kicker-size);
    --app-module-kicker-weight: var(--app-weight-extrabold);
    --app-module-kicker-tracking: var(--app-label-wide-tracking);
    --app-module-page-title-size: var(--app-page-title-size);
    --app-module-page-title-weight: var(--app-weight-extrabold);
    --app-module-page-title-leading: var(--app-leading-display);
    --app-module-page-title-tracking: var(--app-display-tracking);
    --app-module-page-subtitle-size: var(--app-page-subtitle-size);
    --app-module-page-subtitle-leading: var(--app-leading-copy);
    --app-module-page-subtitle-weight: var(--app-weight-book);
    --app-module-page-subtitle-tracking: var(--app-body-soft-tracking);
    --app-module-card-title-size: var(--app-card-title-size);
    --app-module-card-title-weight: var(--app-weight-bold);
    --app-module-card-title-leading: var(--app-leading-ui);
    --app-module-card-title-tracking: var(--app-heading-soft-tracking);
    --app-module-card-subtitle-size: var(--app-card-subtitle-size);
    --app-module-card-subtitle-weight: var(--app-weight-book);
    --app-module-card-subtitle-leading: var(--app-leading-copy-soft);
    --app-module-card-subtitle-tracking: var(--app-body-soft-tracking);
    --app-module-metric-label-font: var(--app-font-ui);
    --app-module-metric-label-size: var(--app-size-label);
    --app-module-metric-label-weight: var(--app-weight-label);
    --app-module-metric-label-tracking: var(--app-label-tracking);
    --app-module-metric-value-size: clamp(var(--app-size-4xl), 2.2vw, var(--app-size-7xl));
    --app-module-metric-value-weight: var(--app-weight-extrabold);
    --app-module-metric-value-leading: var(--app-leading-metric);
    --app-module-metric-value-tracking: var(--app-heading-soft-tracking);
    --app-module-metric-note-size: var(--app-card-subtitle-size);
    --app-module-metric-note-leading: var(--app-leading-copy-soft);
    --app-module-label-font: var(--app-font-body);
    --app-module-label-size: var(--app-size-copy);
    --app-module-label-weight: var(--app-weight-label);
    --app-module-label-leading: var(--app-leading-ui);
    --app-module-label-tracking: var(--app-body-soft-tracking);
    --app-module-label-transform: none;
    --app-module-table-head-font: var(--app-font-ui);
    --app-module-table-head-size: var(--app-size-label);
    --app-module-table-head-weight: var(--app-weight-label);
    --app-module-table-head-leading: var(--app-leading-ui);
    --app-module-table-head-tracking: var(--app-label-tracking);
    --app-module-button-font: var(--app-font-ui);
    --app-module-button-size: var(--app-size-ui);
    --app-module-button-weight: var(--app-weight-label);
    --app-module-button-leading: var(--app-leading-ui);
    --app-module-button-tracking: var(--app-ui-tracking);
    --app-module-button-min-height: 42px;
    --app-module-button-padding-y: 10px;
    --app-module-button-padding-x: 15px;
    --app-module-button-radius: calc(var(--finance-cell-radius, 12px) + 4px);
    --app-module-nav-font: var(--app-font-ui);
    --app-module-nav-size: var(--app-size-xs);
    --app-module-nav-weight: var(--app-weight-label);
    --app-module-nav-leading: var(--app-leading-flat);
    --app-module-nav-tracking: var(--app-ui-tracking);
    --app-module-nav-min-height: 34px;
    --app-module-nav-padding-y: 7px;
    --app-module-nav-padding-x: 10px;
    --app-module-nav-radius: 12px;
    --app-module-chip-font: var(--app-font-ui);
    --app-module-chip-size: var(--app-size-chip);
    --app-module-chip-weight: var(--app-weight-label);
    --app-module-chip-leading: var(--app-leading-flat);
    --app-module-chip-tracking: var(--app-chip-tracking);
    --app-module-chip-transform: uppercase;
    --app-module-modal-radius: calc(var(--app-module-card-radius-xl) + 2px);
    --app-module-modal-padding: 24px;
    --app-module-modal-padding-compact: 18px;
    --app-module-modal-title-size: var(--app-card-title-size);
    --app-module-modal-title-weight: var(--app-weight-extrabold);
    --app-module-modal-title-leading: var(--app-leading-heading);
    --app-module-modal-title-tracking: var(--app-heading-soft-tracking);
    --app-module-modal-note-size: var(--app-card-subtitle-size);
    --app-module-modal-note-leading: var(--app-leading-copy);
    --app-module-popover-title-size: var(--app-size-lg);
    --app-module-popover-title-weight: var(--app-weight-bold);
    --app-module-popover-title-leading: var(--app-leading-ui);
    --app-module-popover-title-tracking: var(--app-heading-soft-tracking);
    --app-module-popover-body-size: var(--app-size-copy-sm);
    --app-module-popover-body-leading: var(--app-leading-copy-soft);
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--app-font-body);
    font-weight: var(--app-text-weight);
    color: var(--app-text);
    background: linear-gradient(180deg, var(--app-page-start) 0%, var(--app-page-end) 100%);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-kerning: normal;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

h1,
h2,
h3,
h4,
h5,
h6,
.card-title,
.modal-title,
.app-confirm-dialog__title,
.shift-shell h1,
.shift-shell h2,
.shift-shell h3,
.shift-shell h4,
.shift-shell h5,
.shift-shell h6 {
    font-family: var(--app-font-heading);
    font-weight: var(--app-heading-weight);
    letter-spacing: var(--app-heading-tracking);
}

.app-page-kicker {
    display: inline-block;
    font-family: var(--app-font-ui);
    font-size: var(--app-page-kicker-size);
    line-height: var(--app-leading-flat);
    font-weight: var(--app-weight-extrabold);
    letter-spacing: var(--app-label-wide-tracking);
    text-transform: uppercase;
}

.app-page-title {
    margin: 0 0 12px;
    max-width: var(--app-page-content-max-width);
    font-family: var(--app-font-heading);
    font-size: var(--app-page-title-size);
    line-height: var(--app-leading-display);
    font-weight: var(--app-weight-extrabold);
    letter-spacing: var(--app-display-tracking);
    color: var(--app-text-strong);
}

.app-page-subtitle {
    margin: 0;
    max-width: var(--app-page-content-max-width);
    font-size: var(--app-page-subtitle-size);
    line-height: var(--app-leading-copy);
    color: var(--app-text-soft);
}

.app-section-title {
    margin: 0 0 10px;
    font-family: var(--app-font-heading);
    font-size: var(--app-section-title-size);
    line-height: var(--app-leading-title);
    font-weight: var(--app-weight-bold);
    letter-spacing: var(--app-heading-soft-tracking);
    color: var(--app-text-strong);
}

.app-card-title {
    margin: 0 0 8px;
    font-family: var(--app-font-heading);
    font-size: var(--app-card-title-size);
    line-height: var(--app-leading-ui);
    font-weight: var(--app-weight-bold);
    letter-spacing: var(--app-heading-soft-tracking);
    color: var(--app-text-strong);
}

.app-card-subtitle {
    margin: 0;
    font-size: var(--app-card-subtitle-size);
    line-height: var(--app-leading-copy);
    color: var(--app-text-soft);
}

.btn,
button,
.nav-link,
.cc-nav-link,
.cc-meta-chip,
.cc-meta-chip__label,
.cc-meta-chip__value,
.cc-account-trigger,
.cc-account-name,
.cc-account-role,
.cc-account-popover,
.cc-account-stat span,
.cc-account-stat strong,
.cc-account-section__label,
.cc-account-section__inline-label,
.shift-snapshot-alert__badge,
.shift-spoiler-card__summary-meta,
.shift-hero-progress__eyebrow,
.form-label,
.app-toast__title,
.app-confirm-dialog__kicker,
.app-inline-loader__label,
.fw-button,
.fw-nav-button,
.fw-chip-button,
.fw-mini-button {
    font-family: var(--app-font-ui);
    font-weight: var(--app-control-weight);
    letter-spacing: var(--app-ui-tracking);
}

a {
    color: #a45a00;
}

a:hover {
    color: #c06d00;
}

#app-toast-stack {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 10860;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(360px, calc(100vw - 24px));
}

.app-toast {
    border-radius: 18px;
    padding: 14px 16px;
    color: #ffffff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .18);
    transform: translateY(-6px);
    opacity: 0;
    transition: opacity .18s ease, transform .18s ease;
}

.app-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.app-toast--success { background: #166534; }
.app-toast--danger { background: #b42318; }
.app-toast--warning { background: #b45309; }
.app-toast--info { background: #1f2937; }

.app-toast__title {
    font-size: var(--app-size-md);
    font-weight: var(--app-label-weight);
    letter-spacing: var(--app-label-tracking);
    text-transform: uppercase;
    opacity: .78;
}

.app-toast__message {
    margin-top: 4px;
    line-height: var(--app-leading-copy);
    font-weight: var(--app-weight-medium);
}

.app-inline-loader {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--theme-label-text, #162032);
    line-height: var(--app-leading-flat);
}

.app-inline-loader--compact {
    gap: 8px;
}

.app-inline-loader--button {
    width: 100%;
}

.app-inline-loader--panel {
    width: 100%;
    min-height: 56px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--theme-field-border, rgba(124, 90, 43, .16)) 100%, transparent);
    background: color-mix(in srgb, var(--theme-surface-bg, #fcfaf7) 92%, transparent);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 68%, transparent),
        0 10px 24px color-mix(in srgb, var(--theme-label-text, #162032) 8%, transparent);
}

.app-inline-loader__label {
    display: inline-block;
    min-width: 0;
    font-size: var(--app-size-md);
    font-weight: var(--app-control-weight);
    letter-spacing: var(--app-ui-tracking);
    line-height: var(--app-leading-ui-roomy);
}

.app-loading-dots {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
}

.app-loading-dots span {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--site-loader-spinner, var(--theme-accent, #8f5d1d));
    box-shadow: 0 4px 10px color-mix(in srgb, var(--site-loader-spinner, var(--theme-accent, #8f5d1d)) 16%, transparent);
    animation: app-loading-dot-pulse .95s ease-in-out infinite;
}

.app-loading-dots span:nth-child(2) {
    animation-delay: .15s;
}

.app-loading-dots span:nth-child(3) {
    animation-delay: .3s;
}

@keyframes app-loading-dot-pulse {
    0%, 80%, 100% {
        transform: translateY(0);
        opacity: .38;
    }
    40% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

[data-local-page-loader-root="true"] {
    position: relative;
    isolation: isolate;
}

[data-local-page-loader-root="true"].is-page-pending > *:not([data-app-local-page-loader-overlay]) {
    transition: opacity .18s ease, filter .18s ease, transform .18s ease;
}

[data-local-page-loader-root="true"].is-page-pending > *:not([data-app-local-page-loader-overlay]) {
    opacity: .72;
    filter: blur(1.25px) saturate(.96);
}

.app-local-page-loader {
    position: absolute;
    inset: 0;
    z-index: 18;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    border-radius: inherit;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--theme-surface-bg, #fcfaf7) 12%, transparent) 0%, color-mix(in srgb, var(--theme-surface-bg, #fcfaf7) 20%, transparent) 100%);
    backdrop-filter: blur(8px) saturate(1.03);
    -webkit-backdrop-filter: blur(8px) saturate(1.03);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
}

[data-local-page-loader-root="true"].is-page-pending > .app-local-page-loader {
    opacity: 1;
    visibility: visible;
}

.app-local-page-loader .app-inline-loader--panel {
    width: auto;
    min-height: 52px;
    padding: 12px 14px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--theme-surface-card-bg, #fffdf8) 88%, transparent);
    box-shadow: 0 16px 36px color-mix(in srgb, var(--theme-label-text, #162032) 12%, transparent);
}

.app-local-page-loader .app-skeleton {
    width: min(960px, 100%);
}

.app-local-loader-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(220px, 44vw);
    margin: 0 auto;
}

.app-local-loader-visual__image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 12px 24px rgba(15, 23, 42, 0.22));
    will-change: transform, filter;
    animation: app-global-loader-cheese-pulse 1.5s infinite ease-in-out;
}

[data-local-page-loader-root="true"][data-local-page-loader-type="dashboard"] > .app-local-page-loader {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 248, 238, 0.08) 100%);
}

[data-local-page-loader-root="true"][data-local-page-loader-type="dashboard"] > .app-local-page-loader .app-local-loader-visual--dashboard {
    width: min(180px, 26vw);
}

.app-local-page-loader .app-skeleton--admin {
    width: min(1120px, 100%);
}

.app-local-page-loader .app-skeleton--finance {
    width: min(1040px, 100%);
}

.app-local-page-loader .app-skeleton--salary {
    width: min(1180px, 100%);
}

.app-local-page-loader .app-skeleton--list {
    width: min(720px, 100%);
}

.app-skeleton {
    display: grid;
    gap: 14px;
}

.app-skeleton__stack {
    display: grid;
    gap: 14px;
}

.app-skeleton__grid {
    display: grid;
    gap: 14px;
}

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

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

.app-skeleton__grid--admin {
    align-items: stretch;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
}

.app-skeleton__card {
    display: grid;
    gap: 10px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--theme-surface-card-border, rgba(221, 201, 171, 0.52)) 100%, transparent);
    background: color-mix(in srgb, var(--theme-surface-card-bg, #fffdf8) 92%, transparent);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--theme-label-text, #162032) 6%, transparent);
}

.app-skeleton__card--xl {
    min-height: 148px;
    align-content: start;
}

.app-skeleton__card--wide {
    min-height: 104px;
    align-content: start;
}

.app-skeleton__toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 12px;
}

.app-skeleton__toolbar--tabs {
    margin-bottom: 4px;
}

.app-skeleton__pill {
    display: inline-block;
    width: 96px;
    height: 38px;
    border-radius: 999px;
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--theme-control-bg, #ece5d9) 88%, transparent) 0%,
            color-mix(in srgb, #ffffff 76%, var(--theme-control-bg, #ece5d9)) 42%,
            color-mix(in srgb, var(--theme-control-bg, #ece5d9) 88%, transparent) 100%);
    background-size: 220% 100%;
    animation: app-skeleton-shimmer 1.35s ease-in-out infinite;
}

.app-skeleton__pill--wide {
    width: 148px;
}

.app-skeleton__table {
    display: grid;
    gap: 10px;
    padding: 16px 18px;
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--theme-surface-card-border, rgba(221, 201, 171, 0.52)) 100%, transparent);
    background: color-mix(in srgb, var(--theme-surface-card-bg, #fffdf8) 92%, transparent);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--theme-label-text, #162032) 6%, transparent);
}

.app-skeleton__table-head,
.app-skeleton__table-row {
    display: grid;
    align-items: center;
    gap: 18px;
    grid-template-columns: minmax(72px, 0.7fr) minmax(0, 1.5fr) minmax(72px, 0.7fr);
}

.app-skeleton__table-head {
    padding-bottom: 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--theme-surface-card-border, rgba(221, 201, 171, 0.52)) 100%, transparent);
}

.app-skeleton__table-row {
    min-height: 50px;
}

.app-skeleton--salary .app-skeleton__table-head,
.app-skeleton--salary .app-skeleton__table-row {
    grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(90px, 0.7fr));
}

.app-skeleton--api .app-skeleton__table-row,
.app-skeleton--api .app-skeleton__table-head,
.app-skeleton--list .app-skeleton__table-row,
.app-skeleton--list .app-skeleton__table-head {
    grid-template-columns: minmax(56px, 0.5fr) minmax(0, 1.8fr) minmax(96px, 0.7fr);
}

.app-skeleton--finance .app-skeleton__card--xl {
    min-height: 176px;
}

.app-skeleton--finance .app-skeleton__card--wide {
    min-height: 128px;
}

.app-skeleton--admin .app-skeleton__card--xl {
    min-height: 184px;
}

[data-local-page-loader-root="true"][data-local-page-loader-type="salary"].is-page-pending > *:not([data-app-local-page-loader-overlay]) {
    filter: none;
}

[data-local-page-loader-root="true"][data-local-page-loader-type="salary"].is-page-pending > .sa-hero,
[data-local-page-loader-root="true"][data-local-page-loader-type="salary"].is-page-pending > .sa-nav {
    opacity: 1;
}

[data-local-page-loader-root="true"][data-local-page-loader-type="salary"].is-page-pending > .sa-panel {
    opacity: .34;
}

[data-local-page-loader-root="true"][data-local-page-loader-type="salary"] > .app-local-page-loader {
    justify-content: flex-start;
    align-items: stretch;
    padding: 228px 24px 28px;
    background:
        linear-gradient(
            180deg,
            transparent 0,
            transparent 194px,
            color-mix(in srgb, var(--theme-surface-bg, #fcfaf7) 38%, transparent) 194px,
            color-mix(in srgb, var(--theme-surface-bg, #fcfaf7) 62%, transparent) 100%
        );
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

[data-local-page-loader-root="true"][data-local-page-loader-type="salary"] > .app-local-page-loader .app-skeleton {
    margin: 0 auto;
}

.app-skeleton__line {
    display: block;
    width: 100%;
    height: 12px;
    border-radius: 999px;
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--theme-control-bg, #ece5d9) 88%, transparent) 0%,
            color-mix(in srgb, #ffffff 78%, var(--theme-control-bg, #ece5d9)) 42%,
            color-mix(in srgb, var(--theme-control-bg, #ece5d9) 88%, transparent) 100%);
    background-size: 220% 100%;
    animation: app-skeleton-shimmer 1.35s ease-in-out infinite;
}

.app-skeleton__line--sm {
    width: 42%;
}

.app-skeleton__line--md {
    width: 68%;
}

.app-skeleton__line--lg {
    width: 84%;
}

@keyframes app-skeleton-shimmer {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}

@media (max-width: 760px) {
    .app-skeleton__grid--metrics {
        grid-template-columns: 1fr;
    }

    .app-skeleton__grid--duo,
    .app-skeleton__grid--admin,
    .app-skeleton__table-head,
    .app-skeleton__table-row,
    .app-skeleton--salary .app-skeleton__table-head,
    .app-skeleton--salary .app-skeleton__table-row,
    .app-skeleton--api .app-skeleton__table-row,
    .app-skeleton--api .app-skeleton__table-head,
    .app-skeleton--list .app-skeleton__table-row,
    .app-skeleton--list .app-skeleton__table-head {
        grid-template-columns: 1fr;
    }

    [data-local-page-loader-root="true"][data-local-page-loader-type="salary"] > .app-local-page-loader {
        padding-top: 184px;
    }
}