@import '@fontsource-variable/geist';
@import '@fontsource/noto-naskh-arabic/400.css';
@import '@fontsource/noto-naskh-arabic/700.css';
@import 'select2/dist/css/select2.min.css';
@import 'datatables.net-dt/css/dataTables.dataTables.css';
@import 'sweetalert2/dist/sweetalert2.min.css';
@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: 'Geist Variable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, 'Noto Naskh Arabic', sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

:root {
    color-scheme: light;
    --sk-bg: #f7f8fb;
    --sk-bg-rgb: 247 248 251;
    --sk-surface: #ffffff;
    --sk-surface-rgb: 255 255 255;
    --sk-surface-soft: #f2f5fa;
    --sk-ink: #13213a;
    --sk-muted: #68768f;
    --sk-muted-strong: #536176;
    --sk-line: #e2e7ef;
    --sk-control-line: #d8e0ec;
    --sk-panel-line: rgba(19, 33, 58, 0.09);
    --sk-brand: #00267b;
    --sk-brand-rgb: 0 38 123;
    --sk-accent: #173f8f;
    --sk-accent-rgb: 23 63 143;
    --sk-accent-hover: #0d3279;
    --sk-accent-ink: #ffffff;
    --sk-gold: #e9a12b;
    --sk-gold-rgb: 233 161 43;
    --sk-gold-ink: #78581d;
    --sk-danger: #be123c;
    --sk-success: #0f766e;
    --sk-success-rgb: 15 118 110;
    --sk-danger-rgb: 190 18 60;
    --sk-neutral-rgb: 16 33 64;
    --sk-table-head: #f4f6fa;
    --sk-sidebar: #ffffff;
    --sk-sidebar-rgb: 255 255 255;
    --sk-sidebar-ink: #17243b;
    --sk-sidebar-muted: #71809a;
    --sk-sidebar-line: #e3e9f2;
    --sk-sidebar-active: rgba(23, 63, 143, 0.08);
    --sk-sidebar-active-ink: #173f8f;
    --sk-logo-bg: #ffffff;
    --sk-overlay: rgba(19, 33, 58, 0.32);
    --sk-panel-highlight: rgba(255, 255, 255, 0.86);
    --sk-radius: 1rem;
    --sk-shadow: 0 18px 48px -36px rgba(19, 33, 58, 0.3);
}

[data-theme='dark'] {
    color-scheme: dark;
    --sk-bg: #0e1828;
    --sk-bg-rgb: 14 24 40;
    --sk-surface: #131f32;
    --sk-surface-rgb: 19 31 50;
    --sk-surface-soft: #18263b;
    --sk-ink: #eef3fb;
    --sk-muted: #aab6c8;
    --sk-muted-strong: #c7d1df;
    --sk-line: rgba(228, 234, 243, 0.12);
    --sk-control-line: rgba(228, 234, 243, 0.18);
    --sk-panel-line: rgba(228, 234, 243, 0.13);
    --sk-brand: #00267b;
    --sk-brand-rgb: 0 38 123;
    --sk-accent: #8fb2ff;
    --sk-accent-rgb: 143 178 255;
    --sk-accent-hover: #a8c3ff;
    --sk-accent-ink: #0e1828;
    --sk-gold: #f1b75c;
    --sk-gold-rgb: 241 183 92;
    --sk-gold-ink: #f3c474;
    --sk-success: #5dd6b2;
    --sk-success-rgb: 93 214 178;
    --sk-danger: #fb7185;
    --sk-danger-rgb: 251 113 133;
    --sk-neutral-rgb: 247 250 255;
    --sk-table-head: rgba(255, 255, 255, 0.04);
    --sk-sidebar: #101b2d;
    --sk-sidebar-rgb: 16 27 45;
    --sk-sidebar-ink: #edf3fb;
    --sk-sidebar-muted: #9ba8bb;
    --sk-sidebar-line: rgba(228, 234, 243, 0.11);
    --sk-sidebar-active: rgba(143, 178, 255, 0.1);
    --sk-sidebar-active-ink: #c4d7ff;
    --sk-logo-bg: #ffffff;
    --sk-overlay: rgba(1, 5, 13, 0.64);
    --sk-panel-highlight: rgba(255, 255, 255, 0.08);
    --sk-shadow: 0 22px 56px -38px rgba(0, 4, 18, 0.88);
}

* {
    scrollbar-color: rgb(var(--sk-accent-rgb) / 0.42) transparent;
    scrollbar-width: thin;
}

body {
    min-height: 100dvh;
    background: var(--sk-bg);
    color: var(--sk-ink);
    font-feature-settings: 'ss01', 'ss02', 'cv01';
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    font-weight: 480;
    line-height: 1.5;
    transition:
        background-color 180ms ease,
        color 180ms ease;
}

[dir='rtl'] {
    font-family: 'Geist Variable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, 'Noto Naskh Arabic', sans-serif;
}

.font-black {
    font-weight: 760;
}

.font-bold {
    font-weight: 660;
}

.font-semibold {
    font-weight: 600;
}

::selection {
    background: rgb(var(--sk-accent-rgb) / 0.2);
}

.app-shell {
    animation: page-enter 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.app-sidebar {
    border-inline-end: 1px solid var(--sk-sidebar-line);
    background: rgb(var(--sk-sidebar-rgb) / 0.96);
    color: var(--sk-sidebar-ink);
}

.sidebar-header {
    border-bottom: 1px solid var(--sk-sidebar-line);
}

.sidebar-brand {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.85rem;
}

.brand-logo-card {
    display: grid;
    width: 8.7rem;
    max-width: min(8.7rem, 62vw);
    place-items: center;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.login-logo-card {
    width: min(13rem, 100%);
    max-width: 100%;
    margin-inline: auto;
    border: 1px solid var(--sk-panel-line);
    border-radius: 0.9rem;
    background: var(--sk-logo-bg);
    box-shadow: 0 16px 46px -38px rgba(19, 33, 58, 0.36);
}

.brand-logo {
    display: block;
    height: auto;
    width: 100%;
    border-radius: 0;
}

.brand-logo-dark {
    display: none;
}

[data-theme='dark'] .brand-logo-light {
    display: none;
}

[data-theme='dark'] .brand-logo-dark {
    display: block;
}

.sidebar-subtitle {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--sk-sidebar-muted);
    font-size: 0.76rem;
    font-weight: 650;
}

.sidebar-subtitle::before {
    display: block;
    height: 0.5rem;
    width: 0.5rem;
    border-radius: 999px;
    background: var(--sk-gold);
    box-shadow: 0 0 0 3px rgb(var(--sk-gold-rgb) / 0.13);
    content: '';
}

.sidebar-section-label {
    padding: 0 0.65rem 0.4rem;
    color: var(--sk-sidebar-muted);
    font-size: 0.68rem;
    font-weight: 740;
    text-transform: uppercase;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: 0.85rem;
    padding: 0.64rem 0.65rem;
    color: var(--sk-sidebar-muted);
    font-size: 0.9rem;
    font-weight: 660;
    transition:
        transform 160ms cubic-bezier(0.16, 1, 0.3, 1),
        background 160ms ease,
        color 160ms ease;
}

.sidebar-link:hover,
.sidebar-link.is-active {
    background: var(--sk-sidebar-active);
    color: var(--sk-sidebar-active-ink);
}

.sidebar-link.is-active {
    color: var(--sk-sidebar-active-ink);
}

.sidebar-link [data-lucide],
.sidebar-link svg {
    opacity: 0.84;
}

.app-header {
    border-bottom: 0;
    background: rgb(var(--sk-bg-rgb) / 0.86);
    backdrop-filter: blur(20px) saturate(1.08);
}

.header-bar {
    min-height: 4.4rem;
}

.header-title {
    min-width: 0;
}

.header-title h1 {
    color: var(--sk-ink);
    font-size: clamp(1.18rem, 1.45vw, 1.42rem);
    font-weight: 760;
    line-height: 1.15;
}

.header-title p {
    margin-top: 0.28rem;
    color: var(--sk-muted);
    font-size: 0.84rem;
    font-weight: 560;
}

.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
}

.text-muted {
    color: var(--sk-muted);
}

.text-muted-strong {
    color: var(--sk-muted-strong);
}

.border-soft {
    border-color: var(--sk-line);
}

.surface-soft {
    background: rgb(var(--sk-surface-rgb) / 0.68);
}

.table-head {
    background: var(--sk-table-head);
    color: var(--sk-muted-strong);
}

.divide-soft > :not([hidden]) ~ :not([hidden]) {
    border-top: 1px solid var(--sk-line);
}

.date-chip {
    gap: 0.02rem;
    min-width: 6.8rem;
    place-items: end;
    color: var(--sk-muted-strong);
    font-size: 0.75rem;
    font-weight: 680;
    line-height: 1.15;
    padding-inline: 0.35rem;
}

[dir='ltr'] .date-chip {
    place-items: start;
}

.header-icon-action,
.header-menu-trigger {
    display: inline-flex;
    min-height: 2.48rem;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1px solid var(--sk-panel-line);
    border-radius: 0.7rem;
    background: rgb(var(--sk-surface-rgb) / 0.82);
    color: var(--sk-ink);
    font-size: 0.82rem;
    font-weight: 650;
    padding: 0.55rem 0.72rem;
    box-shadow: 0 14px 34px -30px rgb(var(--sk-neutral-rgb) / 0.42);
    cursor: pointer;
    transition:
        transform 160ms cubic-bezier(0.16, 1, 0.3, 1),
        border-color 160ms ease,
        background 160ms ease,
        color 160ms ease;
}

.header-icon-action {
    width: 2.48rem;
    padding: 0;
}

.header-icon-action:hover,
.header-menu-trigger:hover,
.header-menu[open] .header-menu-trigger {
    border-color: rgb(var(--sk-accent-rgb) / 0.28);
    background: var(--sk-surface);
    color: var(--sk-accent);
}

.header-icon-action:active,
.header-menu-trigger:active {
    transform: translateY(1px) scale(0.985);
}

.header-menu {
    position: relative;
}

.header-menu summary {
    list-style: none;
}

.header-menu summary::-webkit-details-marker {
    display: none;
}

.header-menu-chevron {
    transition: transform 160ms ease;
}

.header-menu[open] .header-menu-chevron {
    transform: rotate(180deg);
}

.header-menu-panel {
    position: absolute;
    z-index: 26;
    top: calc(100% + 0.55rem);
    inset-inline-end: 0;
    width: min(18rem, calc(100vw - 2rem));
    overflow: hidden;
    border: 1px solid var(--sk-panel-line);
    border-radius: 0.72rem;
    background: var(--sk-surface);
    box-shadow: 0 24px 60px -34px rgb(var(--sk-neutral-rgb) / 0.58);
    padding: 0.45rem;
    transform-origin: top right;
    animation: dropdown-enter 160ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

[dir='rtl'] .header-menu-panel {
    transform-origin: top left;
}

.header-menu-panel.compact {
    width: min(12rem, calc(100vw - 2rem));
}

.menu-label {
    padding: 0.45rem 0.55rem 0.35rem;
    color: var(--sk-muted);
    font-size: 0.7rem;
    font-weight: 720;
    text-transform: uppercase;
}

.menu-action {
    display: flex;
    width: 100%;
    min-height: 2.42rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    border: 0;
    border-radius: 0.55rem;
    background: transparent;
    color: var(--sk-ink);
    font-size: 0.84rem;
    font-weight: 620;
    padding: 0.6rem 0.62rem;
    text-align: start;
    transition:
        background 150ms ease,
        color 150ms ease,
        transform 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.menu-action:hover,
.menu-action.is-active {
    background: rgb(var(--sk-accent-rgb) / 0.08);
    color: var(--sk-accent);
}

.menu-action:active {
    transform: translateY(1px) scale(0.99);
}

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

.menu-action.danger:hover {
    background: rgb(var(--sk-danger-rgb) / 0.08);
}

.menu-action-icon {
    display: inline-grid;
    height: 1.55rem;
    width: 1.55rem;
    place-items: center;
    border-radius: 0.48rem;
    background: rgb(var(--sk-neutral-rgb) / 0.07);
}

.user-trigger {
    padding-inline: 0.45rem 0.62rem;
}

.user-trigger-copy {
    min-width: 0;
    text-align: start;
}

.user-trigger-copy strong,
.user-trigger-copy small {
    display: block;
    max-width: 8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-trigger-copy strong {
    font-size: 0.78rem;
    font-weight: 700;
}

.user-trigger-copy small {
    color: var(--sk-muted);
    font-size: 0.68rem;
    font-weight: 560;
}

.user-avatar {
    display: inline-grid;
    height: 1.86rem;
    width: 1.86rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 0.58rem;
    background: var(--sk-accent);
    color: var(--sk-accent-ink);
    font-size: 0.75rem;
    font-weight: 760;
}

.user-avatar.large {
    height: 2.4rem;
    width: 2.4rem;
    border-radius: 0.65rem;
    font-size: 0.88rem;
}

.user-panel-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.35rem;
    border-bottom: 1px solid var(--sk-line);
    padding: 0.55rem 0.55rem 0.75rem;
}

.lang-button {
    border: 1px solid var(--sk-control-line);
    border-radius: 0.85rem;
    background: var(--sk-surface);
    color: var(--sk-ink);
    font-size: 0.75rem;
    font-weight: 680;
    padding: 0.52rem 0.76rem;
    transition:
        transform 160ms cubic-bezier(0.16, 1, 0.3, 1),
        border-color 160ms ease,
        background 160ms ease,
        color 160ms ease;
}

.lang-button:hover {
    border-color: rgb(var(--sk-accent-rgb) / 0.42);
}

.lang-button.is-active {
    border-color: rgb(var(--sk-accent-rgb) / 0.2);
    background: rgb(var(--sk-accent-rgb) / 0.1);
    color: var(--sk-accent);
}

.alert-success,
.alert-error {
    border-radius: 0.95rem;
    border-width: 1px;
    padding: 0.75rem 1rem;
    font-size: 0.88rem;
    font-weight: 650;
}

.alert-success {
    border-color: rgb(var(--sk-success-rgb) / 0.22);
    background: rgb(var(--sk-success-rgb) / 0.1);
    color: var(--sk-success);
}

.alert-error {
    border-color: rgb(var(--sk-danger-rgb) / 0.22);
    background: rgb(var(--sk-danger-rgb) / 0.1);
    color: var(--sk-danger);
}

.theme-toggle .theme-icon-sun {
    display: none;
}

[data-theme='dark'] .theme-toggle .theme-icon-sun {
    display: block;
}

[data-theme='dark'] .theme-toggle .theme-icon-moon {
    display: none;
}

.role-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--sk-control-line);
    border-radius: 0.9rem;
    background: var(--sk-surface);
    padding: 0.75rem;
    font-size: 0.88rem;
    font-weight: 620;
    transition:
        border-color 160ms ease,
        background 160ms ease;
}

.role-option:hover {
    border-color: rgb(var(--sk-accent-rgb) / 0.42);
    background: rgb(var(--sk-accent-rgb) / 0.05);
}

.form-error {
    margin-top: 0.5rem;
    color: var(--sk-danger);
    font-size: 0.75rem;
    font-weight: 660;
}

.form-helper {
    margin-top: 0.5rem;
    color: var(--sk-muted);
    font-size: 0.75rem;
    font-weight: 620;
}

.tone-icon {
    display: grid;
    height: 2.75rem;
    width: 2.75rem;
    place-items: center;
    border-radius: 0.9rem;
}

.tone-brand {
    background: rgb(var(--sk-accent-rgb) / 0.1);
    color: var(--sk-accent);
}

.tone-amber {
    background: rgb(var(--sk-gold-rgb) / 0.14);
    color: var(--sk-gold-ink);
}

.tone-rose {
    background: rgb(var(--sk-danger-rgb) / 0.1);
    color: var(--sk-danger);
}

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

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

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

.dashboard-hero,
.dashboard-panel,
.dashboard-secondary-metrics {
    border: 1px solid var(--sk-panel-line);
    border-radius: 0.72rem;
    background: rgb(var(--sk-surface-rgb) / 0.88);
    box-shadow: 0 18px 48px -40px rgb(var(--sk-neutral-rgb) / 0.42);
}

.dashboard-hero {
    display: grid;
    gap: 1rem;
    padding: 1.1rem;
}

.dashboard-hero-copy {
    min-width: 0;
}

.dashboard-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    color: var(--sk-accent);
    font-size: 0.72rem;
    font-weight: 720;
}

.dashboard-hero h2 {
    margin-top: 0.42rem;
    max-width: 42rem;
    color: var(--sk-ink);
    font-size: clamp(1.38rem, 2vw, 2rem);
    font-weight: 760;
    letter-spacing: 0;
    line-height: 1.15;
}

.dashboard-hero p {
    margin-top: 0.45rem;
    max-width: 42rem;
    color: var(--sk-muted);
    font-size: 0.92rem;
    font-weight: 540;
}

.dashboard-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: 0.55rem;
}

.dashboard-metric-grid {
    display: grid;
    gap: 0.7rem;
}

.dashboard-metric-card {
    display: grid;
    gap: 0.72rem;
    min-height: 9.4rem;
    border: 1px solid var(--sk-panel-line);
    border-radius: 0.62rem;
    background: var(--sk-surface);
    padding: 0.95rem;
    animation: dashboard-item-enter 340ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(var(--index) * 55ms);
}

.dashboard-metric-top,
.dashboard-metric-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.dashboard-metric-top {
    font-size: 0.78rem;
    font-weight: 660;
}

.dashboard-metric-card > strong {
    color: var(--sk-ink);
    font-size: clamp(1.35rem, 2vw, 1.85rem);
    font-weight: 760;
    line-height: 1;
}

.dashboard-metric-bottom {
    color: var(--sk-muted);
    font-size: 0.72rem;
    font-weight: 620;
}

.tone-dot {
    display: inline-block;
    height: 0.55rem;
    width: 0.55rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--sk-accent);
    box-shadow: 0 0 0 0.22rem rgb(var(--sk-accent-rgb) / 0.1);
}

.tone-dot-brand {
    background: var(--sk-accent);
}

.tone-dot-amber {
    background: var(--sk-gold);
    box-shadow: 0 0 0 0.22rem rgb(var(--sk-gold-rgb) / 0.12);
}

.tone-dot-rose {
    background: var(--sk-danger);
    box-shadow: 0 0 0 0.22rem rgb(var(--sk-danger-rgb) / 0.1);
}

.dashboard-main-grid,
.dashboard-bottom-grid {
    display: grid;
    gap: 1rem;
}

.dashboard-side-stack {
    display: grid;
    align-content: start;
    gap: 1rem;
}

.dashboard-panel {
    min-width: 0;
    padding: 1rem;
}

.dashboard-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.dashboard-panel-header h2 {
    color: var(--sk-ink);
    font-size: 1rem;
    font-weight: 720;
    line-height: 1.2;
}

.dashboard-panel-header p {
    margin-top: 0.26rem;
    color: var(--sk-muted);
    font-size: 0.78rem;
    font-weight: 560;
}

.dashboard-chart-tall,
.dashboard-chart-short,
.dashboard-chart-mini {
    position: relative;
}

.dashboard-chart-tall {
    height: 21rem;
}

.dashboard-chart-short {
    height: 13.8rem;
}

.dashboard-chart-mini {
    height: 13rem;
}

.currency-list,
.health-list,
.activity-list {
    display: grid;
}

.currency-row,
.activity-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid var(--sk-line);
    padding: 0.72rem 0;
}

.currency-row > div {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.currency-row strong {
    font-size: 0.86rem;
    font-weight: 700;
}

.currency-row span:last-child {
    color: var(--sk-ink);
    font-size: 0.84rem;
    font-weight: 700;
}

.dashboard-secondary-metrics {
    display: grid;
    gap: 0;
    overflow: hidden;
}

.dashboard-line-metric {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    border-top: 1px solid var(--sk-line);
    padding: 0.9rem 1rem;
}

.dashboard-line-metric:first-child {
    border-top: 0;
}

.dashboard-line-metric .tone-icon {
    height: 2.35rem;
    width: 2.35rem;
    border-radius: 0.58rem;
}

.dashboard-line-metric span {
    display: block;
    color: var(--sk-muted);
    font-size: 0.75rem;
    font-weight: 620;
}

.dashboard-line-metric strong {
    display: block;
    margin-top: 0.18rem;
    color: var(--sk-ink);
    font-size: 0.98rem;
    font-weight: 720;
}

.dashboard-line-metric em {
    font-style: normal;
    font-size: 0.78rem;
    font-weight: 720;
}

.dashboard-table {
    border-collapse: collapse;
}

.dashboard-table thead {
    background: var(--sk-table-head);
}

.dashboard-table tbody tr {
    transition: background 140ms ease;
}

.dashboard-table tbody tr:hover {
    background: rgb(var(--sk-accent-rgb) / 0.045);
}

.health-list {
    gap: 0.9rem;
}

.health-row {
    display: grid;
    gap: 0.55rem;
}

.health-row > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.health-row span {
    color: var(--sk-ink);
    font-size: 0.86rem;
    font-weight: 680;
}

.health-row strong {
    color: var(--sk-muted);
    font-size: 0.74rem;
    font-weight: 640;
}

.activity-item {
    align-items: flex-start;
}

.activity-item:first-child,
.currency-row:first-child {
    border-top: 0;
}

.activity-item div {
    min-width: 0;
}

.activity-item strong {
    display: block;
    color: var(--sk-ink);
    font-size: 0.84rem;
    font-weight: 700;
}

.activity-item p {
    margin-top: 0.2rem;
    overflow: hidden;
    color: var(--sk-muted);
    font-size: 0.78rem;
    font-weight: 540;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-item > span {
    flex: 0 0 auto;
    color: var(--sk-muted);
    font-size: 0.72rem;
    font-weight: 660;
}

.finance-panel {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--sk-panel-line);
    border-radius: var(--sk-radius);
    background: rgb(var(--sk-surface-rgb) / 0.96);
    box-shadow: var(--sk-shadow);
    transition:
        border-color 220ms ease,
        box-shadow 220ms ease,
        transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
        background 220ms ease;
}

.finance-panel:hover {
    border-color: rgb(var(--sk-accent-rgb) / 0.18);
}

.finance-panel::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 1px 0 var(--sk-panel-highlight);
    content: '';
}

.panel-soft {
    border: 1px solid var(--sk-panel-line);
    border-radius: 0.9rem;
    background: var(--sk-surface-soft);
}

.page-kicker {
    color: var(--sk-gold-ink);
    font-size: 0.7rem;
    font-weight: 760;
    letter-spacing: 0;
    text-transform: uppercase;
}

.tab-button,
.settings-tab-button {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.55rem;
    border: 1px solid var(--sk-control-line);
    border-radius: 0.9rem;
    background: var(--sk-surface);
    color: var(--sk-ink);
    font-size: 0.88rem;
    font-weight: 650;
    padding: 0.64rem 0.8rem;
    transition:
        transform 160ms cubic-bezier(0.16, 1, 0.3, 1),
        border-color 160ms ease,
        background 160ms ease,
        color 160ms ease;
}

.tab-button:hover,
.settings-tab-button:hover {
    border-color: rgb(var(--sk-accent-rgb) / 0.38);
    background: rgb(var(--sk-accent-rgb) / 0.06);
}

.tab-button.is-active,
.settings-tab-button.is-active {
    border-color: rgb(var(--sk-accent-rgb) / 0.28);
    background: rgb(var(--sk-accent-rgb) / 0.12);
    color: var(--sk-accent);
}

.stat-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--sk-panel-line);
    border-radius: 0.95rem;
    background: rgb(var(--sk-surface-rgb) / 0.74);
}

.stat-strip-premium {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: 100%;
}

.stat-strip > div {
    display: grid;
    gap: 0.25rem;
    border-bottom: 1px solid var(--sk-line);
    padding: 0.9rem 1rem;
}

.stat-strip > div:nth-child(odd) {
    border-inline-end: 1px solid var(--sk-line);
}

.stat-strip span {
    color: var(--sk-muted);
    font-size: 0.78rem;
    font-weight: 620;
}

.stat-strip strong {
    font-family: var(--font-mono);
    font-size: 1.15rem;
    font-weight: 760;
}

.account-tree {
    padding: 0.75rem;
}

.account-tree-item {
    position: relative;
}

.account-tree-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
    margin-bottom: 0.55rem;
    margin-inline-start: calc(var(--level) * 1.25rem);
    border: 1px solid var(--sk-panel-line);
    border-radius: 0.95rem;
    background: rgb(var(--sk-surface-rgb) / 0.82);
    padding: 0.85rem;
    transition:
        border-color 160ms ease,
        background 160ms ease,
        transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.account-tree-row:hover {
    border-color: rgb(var(--sk-accent-rgb) / 0.3);
    background: var(--sk-surface);
    transform: translateY(-1px);
}

.account-tree-main,
.account-tree-side {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.account-tree-main {
    min-width: 0;
}

.account-tree-side {
    flex-wrap: wrap;
    justify-content: space-between;
}

.account-tree-children {
    position: relative;
}

.account-code {
    display: inline-flex;
    border-radius: 999px;
    background: rgb(var(--sk-neutral-rgb) / 0.08);
    color: var(--sk-ink);
    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 740;
    padding: 0.22rem 0.55rem;
}

.tree-toggle,
.tree-spacer {
    display: inline-grid;
    flex: 0 0 auto;
    height: 2rem;
    width: 2rem;
    place-items: center;
    border-radius: 0.7rem;
}

.tree-toggle {
    border: 1px solid var(--sk-control-line);
    background: var(--sk-surface);
    color: var(--sk-accent);
    transition:
        transform 160ms ease,
        background 160ms ease;
}

.tree-toggle.is-collapsed {
    transform: rotate(-90deg);
}

[dir='ltr'] .tree-toggle.is-collapsed {
    transform: rotate(90deg);
}

.table-filter-bar {
    display: grid;
    gap: 0.9rem;
    border-bottom: 1px solid var(--sk-line);
    background: rgb(var(--sk-surface-rgb) / 0.7);
    padding: 1rem;
}

.table-filter-bar label,
.settings-label {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--sk-ink);
    font-size: 0.82rem;
    font-weight: 680;
}

.settings-shell {
    overflow: hidden;
}

.settings-head {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-bottom: 1px solid var(--sk-line);
    padding: 1.35rem 1.45rem;
}

.settings-head h2,
.settings-panel-title h3 {
    font-size: 1.08rem;
    font-weight: 740;
}

.settings-head p,
.settings-panel-title p {
    margin-top: 0.35rem;
    color: var(--sk-muted);
    font-size: 0.88rem;
    font-weight: 560;
}

.settings-body {
    display: grid;
    grid-template-columns: 1fr;
}

.settings-tab-list {
    display: flex;
    gap: 0.38rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--sk-line);
    padding: 1rem;
}

.settings-tab-button {
    min-width: max-content;
    border-color: transparent;
    background: transparent;
    color: var(--sk-muted-strong);
}

.settings-tab-button:hover {
    border-color: transparent;
    background: rgb(var(--sk-accent-rgb) / 0.055);
}

.settings-tab-button.is-active {
    border-color: transparent;
    background: rgb(var(--sk-accent-rgb) / 0.09);
    box-shadow: inset 3px 0 0 var(--sk-accent);
    color: var(--sk-accent);
}

[dir='rtl'] .settings-tab-button.is-active {
    box-shadow: inset -3px 0 0 var(--sk-accent);
}

.settings-panels {
    min-width: 0;
    padding: 1.15rem;
}

.settings-panel {
    animation: page-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.settings-panel-title {
    border-bottom: 1px solid var(--sk-line);
    padding-bottom: 1rem;
}

.settings-grid {
    display: grid;
    gap: 1rem;
    padding-top: 1rem;
}

.settings-field {
    border: 1px solid var(--sk-panel-line);
    border-radius: 0.95rem;
    background: rgb(var(--sk-surface-rgb) / 0.66);
    padding: 1rem;
}

.settings-help {
    margin-top: 0.55rem;
    color: var(--sk-muted);
    font-size: 0.76rem;
    font-weight: 560;
}

.settings-error {
    margin-top: 0.45rem;
    color: var(--sk-danger);
    font-size: 0.76rem;
    font-weight: 660;
}

.switch-field {
    display: flex;
    min-height: 3.1rem;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
}

.switch-field input[type='checkbox'],
.switch-field input[type='hidden'] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.switch-field span {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    height: 1.55rem;
    width: 2.8rem;
    border-radius: 999px;
    background: rgb(var(--sk-neutral-rgb) / 0.16);
    transition: background 160ms ease;
}

.switch-field span::after {
    position: absolute;
    top: 0.2rem;
    inset-inline-start: 0.22rem;
    height: 1.15rem;
    width: 1.15rem;
    border-radius: 999px;
    background: var(--sk-surface);
    box-shadow: 0 6px 14px -8px rgb(var(--sk-neutral-rgb) / 0.5);
    content: '';
    transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.switch-field input[type='checkbox']:checked + span {
    background: var(--sk-accent);
}

.switch-field input[type='checkbox']:checked + span::after {
    transform: translateX(calc(-1 * 1.18rem));
}

[dir='ltr'] .switch-field input[type='checkbox']:checked + span::after {
    transform: translateX(1.18rem);
}

.switch-field strong {
    font-size: 0.88rem;
    font-weight: 680;
}

.upload-box {
    display: block;
    cursor: pointer;
}

.upload-box input[type='file'] {
    position: absolute;
    height: 1px;
    width: 1px;
    opacity: 0;
    pointer-events: none;
}

.upload-preview {
    display: grid;
    min-height: 9rem;
    place-items: center;
    overflow: hidden;
    border: 1px dashed rgb(var(--sk-accent-rgb) / 0.36);
    border-radius: 0.95rem;
    background: rgb(var(--sk-accent-rgb) / 0.05);
}

.upload-preview img {
    max-height: 10rem;
    width: 100%;
    object-fit: contain;
}

.upload-placeholder {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--sk-accent);
    font-size: 0.84rem;
    font-weight: 660;
}

.empty-state {
    display: grid;
    min-height: 15rem;
    place-items: center;
    gap: 0.8rem;
    padding: 2rem;
    text-align: center;
}

.empty-state h3 {
    font-size: 1rem;
    font-weight: 740;
}

.empty-state-icon {
    display: grid;
    height: 3rem;
    width: 3rem;
    place-items: center;
    border-radius: 0.9rem;
    background: rgb(var(--sk-accent-rgb) / 0.1);
    color: var(--sk-accent);
}

.input,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: 2.72rem;
    width: 100%;
    border: 1px solid var(--sk-control-line);
    border-radius: 0.86rem;
    background: var(--sk-surface);
    color: var(--sk-ink);
    outline: none;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

.input {
    padding: 0.62rem 0.78rem;
}

textarea.input {
    min-height: 6.4rem;
}

.input:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--sk-accent);
    box-shadow: 0 0 0 4px rgb(var(--sk-accent-rgb) / 0.14);
}

.select2-container {
    display: block;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0.48rem 0.82rem;
    color: var(--sk-ink);
    line-height: 1.8rem;
}

.select2-container--default[dir='rtl'] .select2-selection--single .select2-selection__rendered {
    padding-left: 2rem;
    padding-right: 0.82rem;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0.45rem;
    height: 2rem;
}

.select2-dropdown {
    overflow: hidden;
    border: 1px solid var(--sk-control-line);
    border-radius: 0.9rem;
    background: var(--sk-surface);
    color: var(--sk-ink);
    box-shadow: 0 18px 40px -24px rgb(var(--sk-neutral-rgb) / 0.42);
}

.select2-search--dropdown {
    padding: 0.65rem;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--sk-control-line);
    border-radius: 0.75rem;
    background: var(--sk-surface);
    color: var(--sk-ink);
    padding: 0.55rem 0.7rem;
    outline: none;
}

.select2-results__option {
    padding: 0.65rem 0.85rem;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--sk-accent);
    color: var(--sk-accent-ink);
}

.select2-container--default .select2-results__option--selected {
    background: var(--sk-surface-soft);
    color: var(--sk-ink);
}

.btn-primary,
.btn-secondary,
.btn-danger,
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.86rem;
    font-weight: 670;
    transition:
        transform 160ms cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 160ms ease,
        background 160ms ease,
        border-color 160ms ease;
}

.btn-primary:active,
.btn-secondary:active,
.btn-danger:active,
.icon-btn:active {
    transform: translateY(1px) scale(0.985);
}

.btn-primary {
    background: var(--sk-accent);
    box-shadow: 0 16px 32px -24px rgb(var(--sk-accent-rgb) / 0.72);
    color: var(--sk-accent-ink);
    padding: 0.68rem 0.92rem;
}

.btn-primary:hover {
    background: var(--sk-accent-hover);
}

.btn-secondary {
    border: 1px solid var(--sk-control-line);
    background: var(--sk-surface);
    color: var(--sk-ink);
    padding: 0.68rem 0.92rem;
}

.btn-secondary:hover {
    border-color: rgb(var(--sk-accent-rgb) / 0.38);
    background: rgb(var(--sk-accent-rgb) / 0.06);
}

.btn-danger {
    border: 1px solid rgb(var(--sk-danger-rgb) / 0.18);
    background: rgb(var(--sk-danger-rgb) / 0.1);
    color: var(--sk-danger);
    padding: 0.68rem 0.92rem;
}

.icon-btn {
    height: 2.28rem;
    width: 2.28rem;
    border: 1px solid var(--sk-control-line);
    background: var(--sk-surface);
    color: var(--sk-ink);
}

.icon-btn:hover {
    border-color: rgb(var(--sk-accent-rgb) / 0.38);
    color: var(--sk-accent);
}

.status-badge,
.metric-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    padding: 0.28rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 680;
    line-height: 1;
}

.status-active,
.status-success,
.metric-profit {
    background: rgb(var(--sk-success-rgb) / 0.1);
    color: var(--sk-success);
}

.status-inactive,
.status-suspended,
.status-failed,
.metric-loss {
    background: rgb(var(--sk-danger-rgb) / 0.1);
    color: var(--sk-danger);
}

.status-neutral {
    background: rgb(var(--sk-neutral-rgb) / 0.08);
    color: var(--sk-ink);
}

.progress-track {
    height: 0.42rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgb(var(--sk-neutral-rgb) / 0.08);
}

.progress-bar {
    height: 100%;
    border-radius: inherit;
    background: var(--sk-accent);
}

.table-cell {
    border-bottom: 1px solid var(--sk-line);
    padding: 0.82rem 1rem;
}

table.dataTable {
    width: 100% !important;
    border-collapse: collapse !important;
}

table.dataTable thead th {
    border-bottom: 1px solid var(--sk-line) !important;
    color: var(--sk-muted-strong);
    font-size: 0.78rem;
    font-weight: 680;
    letter-spacing: 0;
    padding: 0.9rem 1rem !important;
    text-align: start;
}

table.dataTable tbody td {
    border-bottom: 1px solid var(--sk-line) !important;
    padding: 0.9rem 1rem !important;
    vertical-align: middle;
}

table.dataTable tbody tr {
    transition: background 140ms ease;
}

table.dataTable tbody tr:hover {
    background: rgb(var(--sk-accent-rgb) / 0.05);
}

.data-table-sticky th:last-child,
.data-table-sticky td:last-child {
    position: sticky;
    inset-inline-end: 0;
    background: var(--sk-surface);
    box-shadow: -10px 0 18px -18px rgb(var(--sk-neutral-rgb) / 0.45);
}

[dir='ltr'] .data-table-sticky th:last-child,
[dir='ltr'] .data-table-sticky td:last-child {
    box-shadow: 10px 0 18px -18px rgb(var(--sk-neutral-rgb) / 0.45);
}

.data-table-sticky thead th:last-child {
    background: var(--sk-table-head);
}

.dt-container {
    padding: 0;
    color: var(--sk-ink);
}

.dt-container .dt-layout-row {
    margin: 0;
    padding: 1rem 1.25rem;
}

.sk-data-table-shell {
    direction: inherit;
}

.sk-data-table-shell .dt-layout-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
}

.sk-data-table-shell .dt-layout-cell {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    text-align: start;
}

[dir='rtl'] .sk-data-table-shell .dt-layout-cell.dt-layout-start {
    margin-inline-start: auto;
}

[dir='rtl'] .sk-data-table-shell .dt-layout-cell.dt-layout-end {
    margin-inline-end: auto;
}

.sk-data-table-shell .dt-search,
.sk-data-table-shell .dt-length {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--sk-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.dt-container .dt-layout-row:first-child {
    border-bottom: 1px solid var(--sk-line);
}

.dt-container .dt-layout-row:last-child {
    border-top: 1px solid var(--sk-line);
}

.dt-container .dt-search input,
.dt-container .dt-length select {
    border: 1px solid var(--sk-control-line) !important;
    border-radius: 0.85rem !important;
    background: var(--sk-surface) !important;
    color: var(--sk-ink) !important;
    padding: 0.55rem 0.75rem !important;
    outline: none;
}

[dir='rtl'] .dt-container .dt-search input,
[dir='rtl'] .dt-container .dt-length select {
    direction: rtl;
    text-align: right;
}

.dt-container .dt-info {
    color: var(--sk-muted);
    font-size: 0.8rem;
    font-weight: 660;
}

.dt-container .dt-paging .dt-paging-button {
    border: 1px solid transparent !important;
    border-radius: 0.75rem !important;
    padding: 0.45rem 0.7rem !important;
}

.dt-container .dt-paging .dt-paging-button.current,
.dt-container .dt-paging .dt-paging-button.current:hover {
    border-color: var(--sk-accent) !important;
    background: var(--sk-accent) !important;
    color: var(--sk-accent-ink) !important;
}

.table-loader {
    display: inline-block;
    height: 0.85rem;
    width: 0.85rem;
    margin-inline-end: 0.45rem;
    animation: spin 700ms linear infinite;
    border: 2px solid rgb(var(--sk-accent-rgb) / 0.22);
    border-top-color: var(--sk-accent);
    border-radius: 999px;
    vertical-align: -0.12rem;
}

.calendar-hint {
    min-height: 1.1rem;
    margin-top: 0.35rem;
    color: var(--sk-muted);
    font-size: 0.76rem;
    font-weight: 560;
}

.resource-page-shell,
.accounts-workspace,
.roles-workspace {
    display: grid;
    gap: 1rem;
}

.resource-hero,
.accounts-hero {
    display: grid;
    gap: 1rem;
    padding: 1.2rem;
    background:
        linear-gradient(135deg, rgb(var(--sk-accent-rgb) / 0.07), transparent 42%),
        rgb(var(--sk-surface-rgb) / 0.94);
    animation: analytics-rise 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.resource-hero h2,
.accounts-hero h2 {
    margin-top: 0.25rem;
    color: var(--sk-ink);
    font-size: clamp(1.35rem, 2vw, 2rem);
    font-weight: 790;
    line-height: 1.1;
}

.resource-hero p,
.accounts-hero p {
    margin-top: 0.42rem;
    max-width: 46rem;
    color: var(--sk-muted);
    font-size: 0.9rem;
    font-weight: 570;
}

.resource-hero {
    align-items: start;
}

.resource-stat-strip,
.accounts-insight-grid {
    display: grid;
    gap: 0.8rem;
}

.resource-stat-strip {
    grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
}

.resource-stat-strip > .finance-panel {
    display: grid;
    gap: 0.35rem;
    min-height: 6.4rem;
    padding: 0.9rem 1rem;
    animation: analytics-rise 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.resource-stat-strip span,
.accounts-hero-metrics span {
    color: var(--sk-muted);
    font-size: 0.76rem;
    font-weight: 720;
}

.resource-stat-strip strong,
.accounts-hero-metrics strong {
    color: var(--sk-ink);
    font-size: 1.35rem;
    font-weight: 790;
}

.accounts-command-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1rem;
}

.accounts-hero-metrics {
    display: grid;
    gap: 0.72rem;
}

.accounts-hero-metrics > div {
    display: grid;
    gap: 0.32rem;
    border: 1px solid var(--sk-panel-line);
    border-radius: 0.86rem;
    background: rgb(var(--sk-surface-rgb) / 0.72);
    padding: 0.92rem;
}

.accounts-hero-metrics em {
    color: var(--sk-muted);
    font-size: 0.74rem;
    font-style: normal;
    font-weight: 650;
}

.accounts-mini-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.accounts-mini-head strong {
    color: var(--sk-ink);
    font-size: 0.95rem;
    font-weight: 760;
}

.account-type-bars,
.account-currency-list,
.radar-score-list,
.funnel-readable-list {
    display: grid;
    gap: 0.58rem;
}

.account-type-bar,
.account-currency-list > div,
.radar-score-list > div,
.funnel-readable-list > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.32rem 0.72rem;
    animation: analytics-rise 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(var(--index) * 48ms);
}

.account-type-bar span,
.account-currency-list span,
.radar-score-list span,
.funnel-readable-list span {
    color: var(--sk-muted-strong);
    font-size: 0.78rem;
    font-weight: 700;
}

.account-type-bar strong,
.account-currency-list strong,
.radar-score-list strong,
.funnel-readable-list strong {
    color: var(--sk-ink);
    font-size: 0.82rem;
    font-weight: 780;
}

.account-type-bar i,
.account-currency-list i,
.radar-score-list i,
.funnel-readable-list i {
    grid-column: 1 / -1;
    display: block;
    height: 0.44rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgb(var(--sk-neutral-rgb) / 0.075);
}

.account-type-bar i::before,
.account-currency-list i::before,
.radar-score-list i::before,
.funnel-readable-list i::before {
    display: block;
    height: 100%;
    width: calc(var(--value) * 1%);
    border-radius: inherit;
    background: linear-gradient(90deg, var(--sk-accent), var(--sk-success));
    animation: meter-flow 1.8s cubic-bezier(0.16, 1, 0.3, 1) both;
    content: '';
}

.roles-layout {
    display: grid;
    gap: 1rem;
}

.role-create-card {
    display: grid;
    gap: 0.65rem;
    width: min(100%, 24rem);
    border: 1px solid var(--sk-panel-line);
    border-radius: 0.9rem;
    background: rgb(var(--sk-surface-rgb) / 0.72);
    padding: 0.8rem;
}

.role-create-card label {
    display: grid;
    gap: 0.45rem;
    color: var(--sk-muted);
    font-size: 0.76rem;
    font-weight: 730;
}

.role-list-panel,
.role-editor-panel {
    padding: 1rem;
}

.role-list {
    display: grid;
    gap: 0.55rem;
}

.role-list-item {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    border: 1px solid var(--sk-panel-line);
    border-radius: 0.82rem;
    background: rgb(var(--sk-surface-rgb) / 0.62);
    padding: 0.78rem;
    text-align: start;
    transition:
        transform 160ms cubic-bezier(0.16, 1, 0.3, 1),
        border-color 160ms ease,
        background 160ms ease;
}

.role-list-item:hover,
.role-list-item.is-active {
    border-color: rgb(var(--sk-accent-rgb) / 0.28);
    background: rgb(var(--sk-accent-rgb) / 0.07);
    transform: translateY(-1px);
}

.role-list-item span {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.role-list-item strong {
    color: var(--sk-ink);
    font-size: 0.88rem;
    font-weight: 760;
}

.role-list-item em,
.role-editor-head p {
    color: var(--sk-muted);
    font-size: 0.74rem;
    font-style: normal;
    font-weight: 650;
}

.role-list-item b {
    display: grid;
    height: 2rem;
    min-width: 2rem;
    place-items: center;
    border-radius: 0.62rem;
    background: rgb(var(--sk-neutral-rgb) / 0.08);
    color: var(--sk-ink);
    font-size: 0.78rem;
}

.role-editor-head {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-bottom: 1px solid var(--sk-line);
    padding-bottom: 1rem;
}

.role-name-input {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--sk-ink);
    font-size: clamp(1.2rem, 2vw, 1.7rem);
    font-weight: 790;
    outline: none;
}

.permission-matrix {
    display: grid;
    gap: 0.85rem;
    padding-top: 1rem;
}

.permission-group {
    border: 1px solid var(--sk-panel-line);
    border-radius: 0.88rem;
    background: rgb(var(--sk-surface-rgb) / 0.58);
    padding: 0.78rem;
}

.permission-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.7rem;
}

.permission-group-head > div {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.permission-group-head button {
    border-radius: 999px;
    background: rgb(var(--sk-accent-rgb) / 0.08);
    color: var(--sk-accent);
    font-size: 0.68rem;
    font-weight: 760;
    padding: 0.24rem 0.58rem;
}

.permission-group-head strong {
    color: var(--sk-ink);
    font-size: 0.9rem;
    font-weight: 760;
}

.permission-group-head span {
    border-radius: 999px;
    background: rgb(var(--sk-neutral-rgb) / 0.08);
    color: var(--sk-muted-strong);
    font-size: 0.72rem;
    font-weight: 760;
    padding: 0.22rem 0.55rem;
}

.permission-check-grid {
    display: grid;
    gap: 0.48rem;
}

.permission-check {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.1rem 0.55rem;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 0.72rem;
    padding: 0.55rem;
    transition:
        background 150ms ease,
        border-color 150ms ease;
}

.permission-check:hover {
    border-color: rgb(var(--sk-accent-rgb) / 0.18);
    background: rgb(var(--sk-accent-rgb) / 0.045);
}

.permission-check input {
    grid-row: 1 / span 2;
    accent-color: var(--sk-accent);
}

.permission-check span {
    color: var(--sk-ink);
    font-size: 0.82rem;
    font-weight: 720;
}

.permission-check em {
    color: var(--sk-muted);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-style: normal;
    font-weight: 650;
}

.date-secondary {
    display: block;
    color: var(--sk-muted);
    font-size: 0.68rem;
}

.sk-tooltip {
    position: absolute;
    z-index: 40;
    max-width: 18rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.75rem;
    background: #06183f;
    box-shadow: 0 18px 35px -24px rgba(0, 4, 18, 0.7);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 560;
    padding: 0.5rem 0.65rem;
    pointer-events: none;
    transform: translateY(4px);
    animation: tooltip-enter 140ms ease forwards;
}

.app-modal {
    background: var(--sk-overlay);
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 160ms ease;
}

.app-modal.is-open {
    opacity: 1;
}

.app-modal .modal-panel {
    transform: translateY(0.8rem) scale(0.985);
    transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.app-modal.is-open .modal-panel {
    transform: translateY(0) scale(1);
}

.swal-confirm,
.swal-cancel {
    border-radius: 0.85rem;
    font-weight: 680;
    padding: 0.68rem 1rem;
}

.swal-confirm {
    background: var(--sk-accent);
    color: var(--sk-accent-ink);
}

.swal-cancel {
    margin-inline: 0.5rem;
    border: 1px solid var(--sk-control-line);
    background: var(--sk-surface);
    color: var(--sk-ink);
}

.sk-toast,
.sk-alert {
    border: 1px solid var(--sk-panel-line) !important;
    border-radius: 1rem !important;
    background: var(--sk-surface) !important;
    color: var(--sk-ink) !important;
    font-family: inherit !important;
}

.skeleton {
    position: relative;
    overflow: hidden;
    border-radius: 0.9rem;
    background: rgb(var(--sk-neutral-rgb) / 0.08);
}

.skeleton::after {
    position: absolute;
    inset: 0;
    animation: shimmer 1.4s infinite;
    background: linear-gradient(90deg, transparent, rgb(var(--sk-surface-rgb) / 0.62), transparent);
    content: '';
    transform: translateX(-100%);
}

[data-lucide] {
    height: 1.05rem;
    width: 1.05rem;
    stroke-width: 1.8;
}

@keyframes page-enter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

@keyframes tooltip-enter {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes dropdown-enter {
    from {
        opacity: 0;
        transform: translateY(-0.35rem) scale(0.985);
    }

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

@keyframes dashboard-item-enter {
    from {
        opacity: 0;
        transform: translateY(0.45rem);
    }

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

@keyframes shimmer {
    to {
        transform: translateX(100%);
    }
}

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

@media (min-width: 640px) {
    .dashboard-metric-grid,
    .dashboard-secondary-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-line-metric {
        border-top: 0;
        border-inline-start: 1px solid var(--sk-line);
    }

    .dashboard-line-metric:first-child,
    .dashboard-line-metric:nth-child(2n + 1) {
        border-inline-start: 0;
    }

    .dashboard-line-metric:nth-child(n + 3) {
        border-top: 1px solid var(--sk-line);
    }

    .stat-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .stat-strip > div {
        border-bottom: 0;
        border-inline-end: 1px solid var(--sk-line);
    }

    .stat-strip > div:last-child {
        border-inline-end: 0;
    }

    .table-filter-bar,
    .settings-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-head {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

@media (min-width: 1024px) {
    .dashboard-hero {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        padding: 1.25rem;
    }

    .dashboard-metric-grid {
        grid-column: 1 / -1;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .dashboard-main-grid {
        grid-template-columns: minmax(0, 1.45fr) minmax(20rem, 0.55fr);
    }

    .dashboard-bottom-grid {
        grid-template-columns: minmax(0, 1.2fr) minmax(20rem, 0.55fr);
    }

    .account-tree-row {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .account-tree-side {
        justify-content: flex-end;
    }

    .settings-body {
        grid-template-columns: 14.5rem minmax(0, 1fr);
    }

    .settings-tab-list {
        flex-direction: column;
        overflow-x: visible;
        border-bottom: 0;
        border-inline-end: 1px solid var(--sk-line);
    }

    .settings-tab-button {
        width: 100%;
    }

    .settings-panels {
        padding: 1.25rem;
    }
}

@media (max-width: 767px) {
    .header-bar {
        align-items: stretch;
    }

    .header-actions {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 0.1rem;
    }

    .header-menu-panel {
        position: fixed;
        top: 4.5rem;
        inset-inline: 1rem;
        width: auto;
    }

    .dashboard-hero-actions .btn-primary,
    .dashboard-hero-actions .btn-secondary {
        flex: 1 1 11rem;
    }

    .dt-container .dt-layout-row {
        display: grid !important;
        gap: 0.8rem;
    }

    .dt-container .dt-search,
    .dt-container .dt-length {
        text-align: start !important;
    }
}

/* Premium analytical dashboard refresh */
.dashboard-pro {
    gap: 1.1rem;
}

.analytics-hero,
.analytics-panel,
.analytics-stat {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--sk-panel-line);
    background: rgb(var(--sk-surface-rgb) / 0.9);
    box-shadow: 0 24px 60px -48px rgb(var(--sk-neutral-rgb) / 0.55);
}

.analytics-hero::before,
.analytics-panel::before,
.analytics-stat::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 1px 0 var(--sk-panel-highlight);
    content: '';
}

.analytics-hero {
    display: grid;
    gap: 1rem;
    border-radius: 0.95rem;
    padding: 1rem;
    background:
        linear-gradient(135deg, rgb(var(--sk-accent-rgb) / 0.08), transparent 42%),
        linear-gradient(180deg, rgb(var(--sk-surface-rgb) / 0.98), rgb(var(--sk-surface-rgb) / 0.82));
    animation: analytics-rise 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.analytics-hero::after {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgb(var(--sk-neutral-rgb) / 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgb(var(--sk-neutral-rgb) / 0.045) 1px, transparent 1px);
    background-size: 2.4rem 2.4rem;
    mask-image: linear-gradient(120deg, transparent, #13213a 20%, transparent 78%);
    opacity: 0.55;
    content: '';
}

.analytics-hero-main,
.analytics-hero-aside,
.analytics-panel > *,
.analytics-stat > * {
    position: relative;
}

.analytics-hero-main {
    display: grid;
    min-width: 0;
    gap: 1rem;
}

.analytics-hero h2 {
    max-width: 48rem;
    color: var(--sk-ink);
    font-size: 2rem;
    font-weight: 780;
    letter-spacing: 0;
    line-height: 1.05;
}

.analytics-hero p {
    max-width: 46rem;
    color: var(--sk-muted);
    font-size: 0.94rem;
    font-weight: 560;
}

.analytics-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.analytics-signal-row {
    display: grid;
    gap: 0.65rem;
}

.analytics-signal {
    display: grid;
    gap: 0.2rem;
    border-top: 1px solid var(--sk-line);
    padding-top: 0.75rem;
}

.analytics-signal span,
.analytics-stat-label,
.panel-kicker {
    color: var(--sk-muted);
    font-size: 0.72rem;
    font-weight: 740;
    text-transform: uppercase;
}

.analytics-signal strong {
    color: var(--sk-ink);
    font-size: 1.05rem;
    font-weight: 780;
    line-height: 1;
}

.analytics-signal em {
    color: var(--sk-muted-strong);
    font-size: 0.76rem;
    font-style: normal;
    font-weight: 620;
}

.analytics-hero-aside {
    display: grid;
    align-content: start;
    gap: 0.75rem;
}

.market-pulse-panel,
.rate-tape {
    border: 1px solid var(--sk-panel-line);
    border-radius: 0.82rem;
    background: rgb(var(--sk-surface-rgb) / 0.74);
}

.market-pulse-panel {
    display: grid;
    gap: 0.7rem;
    padding: 0.9rem;
}

.market-pulse-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.market-pulse-top > span:first-child {
    color: var(--sk-muted);
    font-size: 0.76rem;
    font-weight: 720;
}

.market-pulse-panel strong {
    color: var(--sk-ink);
    font-size: 1.2rem;
    font-weight: 780;
}

.market-pulse-panel p {
    color: var(--sk-muted);
    font-size: 0.82rem;
}

.pulse-meter,
.pulse-meter span {
    display: block;
    height: 0.48rem;
    border-radius: 999px;
}

.pulse-meter {
    overflow: hidden;
    background: rgb(var(--sk-neutral-rgb) / 0.08);
}

.pulse-meter span {
    background: linear-gradient(90deg, var(--sk-success), var(--sk-gold));
    animation: meter-flow 2.6s cubic-bezier(0.16, 1, 0.3, 1) infinite alternate;
}

.rate-tape {
    overflow: hidden;
}

.rate-row {
    display: grid;
    grid-template-columns: minmax(4.8rem, 0.8fr) minmax(0, 1.2fr) auto;
    align-items: center;
    gap: 0.6rem;
    border-top: 1px solid var(--sk-line);
    padding: 0.68rem 0.82rem;
}

.rate-row:first-child {
    border-top: 0;
}

.rate-row span {
    color: var(--sk-muted);
    font-size: 0.76rem;
    font-weight: 720;
}

.rate-row strong {
    color: var(--sk-ink);
    font-size: 0.82rem;
    font-weight: 760;
}

.rate-row em {
    font-size: 0.74rem;
    font-style: normal;
    font-weight: 760;
}

.analytics-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
    gap: 0.8rem;
}

.analytics-stat {
    display: grid;
    gap: 0.65rem;
    min-height: 11rem;
    border-radius: 0.82rem;
    padding: 0.92rem;
    animation: analytics-rise 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(var(--index) * 58ms);
}

.analytics-stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.analytics-stat strong {
    color: var(--sk-ink);
    font-size: 1.45rem;
    font-weight: 780;
    line-height: 1;
}

.stat-sparkline {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    align-items: end;
    gap: 0.28rem;
    height: 2.7rem;
    margin-top: auto;
}

.stat-sparkline span {
    display: block;
    min-height: 0.35rem;
    border-radius: 999px 999px 0.25rem 0.25rem;
    background: rgb(var(--sk-accent-rgb) / 0.3);
    transform-origin: bottom;
    animation: spark-grow 720ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.analytics-stat.tone-emerald .stat-sparkline span {
    background: rgb(var(--sk-success-rgb) / 0.32);
}

.analytics-stat.tone-amber .stat-sparkline span {
    background: rgb(var(--sk-gold-rgb) / 0.34);
}

.analytics-stat.tone-rose .stat-sparkline span {
    background: rgb(var(--sk-danger-rgb) / 0.26);
}

.analytics-grid {
    display: grid;
    gap: 1rem;
}

.analytics-rail {
    display: grid;
    align-content: start;
    gap: 1rem;
}

.analytics-panel {
    min-width: 0;
    border-radius: 0.9rem;
    padding: 1rem;
    animation: analytics-rise 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.analytics-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.analytics-panel-header.compact {
    margin-bottom: 0.65rem;
}

.analytics-panel-header h2 {
    margin-top: 0.18rem;
    color: var(--sk-ink);
    font-size: 1.05rem;
    font-weight: 760;
    line-height: 1.18;
}

.analytics-panel-header p {
    margin-top: 0.25rem;
    color: var(--sk-muted);
    font-size: 0.78rem;
    font-weight: 570;
}

.range-control {
    display: inline-flex;
    gap: 0.25rem;
    border: 1px solid var(--sk-control-line);
    border-radius: 0.78rem;
    background: rgb(var(--sk-neutral-rgb) / 0.045);
    padding: 0.24rem;
}

.range-control button {
    min-width: 2.7rem;
    border-radius: 0.58rem;
    color: var(--sk-muted-strong);
    font-size: 0.75rem;
    font-weight: 760;
    padding: 0.48rem 0.62rem;
    transition:
        transform 160ms cubic-bezier(0.16, 1, 0.3, 1),
        background 160ms ease,
        color 160ms ease;
}

.range-control button:hover,
.range-control button.is-active {
    background: var(--sk-surface);
    color: var(--sk-accent);
    box-shadow: 0 10px 26px -24px rgb(var(--sk-neutral-rgb) / 0.4);
}

.range-control button:active {
    transform: translateY(1px) scale(0.98);
}

.chart-frame {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border-radius: 0.78rem;
    background:
        linear-gradient(180deg, rgb(var(--sk-surface-rgb) / 0.68), rgb(var(--sk-surface-rgb) / 0.34)),
        rgb(var(--sk-neutral-rgb) / 0.025);
}

.amchart {
    position: relative;
    z-index: 1;
    width: 100%;
    direction: ltr;
    text-align: left;
    unicode-bidi: isolate;
}

.amchart * {
    direction: ltr;
    unicode-bidi: isolate;
}

.amchart-xl {
    height: 25rem;
}

.amchart-lg {
    height: 22rem;
}

.amchart-md {
    height: 19.5rem;
}

.amchart-gauge {
    height: 11.5rem;
}

.amchart-donut {
    height: 14.2rem;
}

.amchart-heat {
    height: 20.5rem;
}

.amchart-radar {
    height: 20.5rem;
}

.chart-skeleton {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: end;
    gap: 0.8rem;
    padding: 1rem;
    background: rgb(var(--sk-surface-rgb) / 0.86);
    opacity: 1;
    transition: opacity 180ms ease;
}

.chart-frame.is-ready .chart-skeleton {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.chart-frame.is-error::after {
    position: absolute;
    inset: 1rem;
    z-index: 3;
    display: grid;
    place-items: center;
    border: 1px dashed rgb(var(--sk-danger-rgb) / 0.28);
    border-radius: 0.72rem;
    background: rgb(var(--sk-danger-rgb) / 0.05);
    color: var(--sk-danger);
    font-size: 0.82rem;
    font-weight: 760;
    content: '!';
}

.chart-skeleton span {
    position: relative;
    display: block;
    min-height: 4rem;
    overflow: hidden;
    border-radius: 0.62rem;
    background: rgb(var(--sk-neutral-rgb) / 0.07);
}

.chart-skeleton span::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgb(var(--sk-surface-rgb) / 0.78), transparent);
    transform: translateX(-100%);
    animation: skeleton-sweep 1.15s ease-in-out infinite;
    content: '';
}

.chart-skeleton span:nth-child(1) {
    height: 48%;
}

.chart-skeleton span:nth-child(2) {
    height: 74%;
}

.chart-skeleton span:nth-child(3) {
    height: 58%;
}

.chart-skeleton.radial,
.chart-skeleton.mosaic,
.chart-skeleton.flow,
.chart-skeleton.heat {
    grid-template-columns: 1fr;
    place-items: center;
}

.chart-skeleton.radial span {
    height: 8.5rem;
    width: 8.5rem;
    border-radius: 999px;
}

.chart-skeleton.mosaic {
    grid-template-columns: repeat(2, 1fr);
    align-items: stretch;
}

.chart-skeleton.mosaic span,
.chart-skeleton.heat span {
    height: auto;
    min-height: 5rem;
}

.chart-skeleton.flow span {
    width: 82%;
    height: 2.4rem;
    min-height: 2.4rem;
}

.chart-skeleton.heat {
    grid-template-columns: repeat(3, 1fr);
}

.chart-legend,
.chart-chip-row,
.flow-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 0.85rem;
    border-top: 1px solid var(--sk-line);
    margin-top: 0.72rem;
    padding-top: 0.72rem;
}

.chart-data-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
    border-top: 1px solid var(--sk-line);
    margin-top: 0.72rem;
    padding-top: 0.72rem;
}

.chart-data-strip > div {
    display: grid;
    gap: 0.2rem;
    border: 1px solid var(--sk-panel-line);
    border-radius: 0.72rem;
    background: rgb(var(--sk-surface-rgb) / 0.62);
    padding: 0.62rem;
}

.chart-data-strip span,
.bridge-step em {
    color: var(--sk-muted);
    font-size: 0.7rem;
    font-weight: 720;
}

.chart-data-strip strong,
.bridge-step strong {
    color: var(--sk-ink);
    font-size: 0.86rem;
    font-weight: 780;
}

.heatmap-readable-grid {
    display: grid;
    gap: 0.5rem;
    border-top: 1px solid var(--sk-line);
    margin-top: 0.72rem;
    padding-top: 0.72rem;
}

.heatmap-readable-row {
    display: grid;
    grid-template-columns: minmax(4rem, 0.45fr) repeat(4, minmax(0, 1fr));
    gap: 0.42rem;
    align-items: stretch;
}

.heatmap-readable-row > strong,
.heatmap-readable-row > span {
    border-radius: 0.62rem;
    padding: 0.46rem 0.5rem;
}

.heatmap-readable-row > strong {
    display: grid;
    place-items: center;
    background: rgb(var(--sk-neutral-rgb) / 0.07);
    color: var(--sk-ink);
    font-size: 0.76rem;
    font-weight: 780;
}

.heatmap-readable-row > span {
    display: grid;
    gap: 0.12rem;
    background:
        linear-gradient(90deg, rgb(var(--sk-success-rgb) / 0.16) calc(var(--value) * 1%), transparent 0),
        rgb(var(--sk-neutral-rgb) / 0.045);
}

.heatmap-readable-row em {
    color: var(--sk-muted);
    font-size: 0.66rem;
    font-style: normal;
    font-weight: 700;
}

.heatmap-readable-row b {
    color: var(--sk-ink);
    font-size: 0.78rem;
    font-weight: 780;
}

.bridge-step-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5.4rem, 1fr));
    gap: 0.45rem;
    border-top: 1px solid var(--sk-line);
    margin-top: 0.72rem;
    padding-top: 0.72rem;
}

.bridge-step {
    display: grid;
    gap: 0.14rem;
    border: 1px solid var(--sk-panel-line);
    border-radius: 0.7rem;
    background: rgb(var(--sk-neutral-rgb) / 0.045);
    padding: 0.55rem;
}

.bridge-step.is-profit {
    background: rgb(var(--sk-success-rgb) / 0.08);
}

.bridge-step.is-loss {
    background: rgb(var(--sk-danger-rgb) / 0.08);
}

.chart-legend span,
.chart-chip-row span,
.flow-summary span {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    min-width: 0;
    color: var(--sk-muted-strong);
    font-size: 0.75rem;
    font-weight: 720;
    line-height: 1.2;
}

.chart-legend i,
.chart-chip-row i {
    display: inline-block;
    height: 0.58rem;
    width: 0.58rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--legend-color);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--legend-color) 18%, transparent);
}

.flow-summary {
    justify-content: space-between;
}

.flow-summary strong {
    color: var(--sk-ink);
    font-size: 0.82rem;
}

.gauge-caption {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid var(--sk-line);
    margin-top: 0.7rem;
    padding-top: 0.72rem;
}

.gauge-caption strong {
    color: var(--sk-ink);
    font-size: 1.18rem;
}

.gauge-caption span {
    color: var(--sk-muted);
    font-size: 0.78rem;
    font-weight: 620;
    text-align: end;
}

.currency-list.premium {
    margin-top: 0.65rem;
}

.currency-row small {
    color: var(--sk-muted);
    font-size: 0.68rem;
    font-weight: 650;
}

.portfolio-panel {
    align-self: stretch;
}

.portfolio-list {
    display: grid;
    gap: 0.65rem;
}

.portfolio-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.28rem 0.8rem;
    border-top: 1px solid var(--sk-line);
    padding-top: 0.72rem;
}

.portfolio-row:first-child {
    border-top: 0;
    padding-top: 0;
}

.portfolio-row span {
    color: var(--sk-muted);
    font-size: 0.78rem;
    font-weight: 680;
}

.portfolio-row strong {
    color: var(--sk-ink);
    font-size: 0.98rem;
    font-weight: 780;
}

.portfolio-row em {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 760;
}

.premium-table thead {
    background: rgb(var(--sk-neutral-rgb) / 0.045);
}

.activity-list.premium .activity-item {
    padding-block: 0.82rem;
}

@keyframes analytics-rise {
    from {
        opacity: 0;
        transform: translateY(0.55rem);
    }

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

@keyframes spark-grow {
    from {
        opacity: 0;
        transform: scaleY(0.2);
    }

    to {
        opacity: 1;
        transform: scaleY(1);
    }
}

@keyframes meter-flow {
    from {
        filter: saturate(0.82);
        transform: scaleX(0.985);
    }

    to {
        filter: saturate(1.08);
        transform: scaleX(1);
    }
}

@keyframes skeleton-sweep {
    to {
        transform: translateX(100%);
    }
}

@media (min-width: 640px) {
    .analytics-signal-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .role-create-card {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
    }

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

@media (min-width: 1024px) {
    .resource-hero,
    .accounts-hero {
        grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
        align-items: start;
    }

    .resource-hero {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .accounts-insight-grid {
        grid-template-columns: minmax(16rem, 0.58fr) minmax(0, 1fr) minmax(16rem, 0.7fr);
    }

    .roles-layout {
        grid-template-columns: minmax(17rem, 0.38fr) minmax(0, 1fr);
        align-items: start;
    }

    .role-list-panel {
        position: sticky;
        top: 5.25rem;
    }

    .role-editor-head {
        flex-direction: row;
        align-items: start;
        justify-content: space-between;
    }

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

    .analytics-hero {
        grid-template-columns: minmax(0, 1.35fr) minmax(19rem, 0.65fr);
        padding: 1.15rem;
    }

    .analytics-hero h2 {
        font-size: 2.35rem;
    }

    .analytics-grid-primary {
        grid-template-columns: minmax(0, 1.52fr) minmax(20rem, 0.58fr);
    }

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

    .analytics-grid-secondary {
        grid-template-columns: minmax(0, 1.24fr) minmax(18rem, 0.64fr) minmax(16rem, 0.48fr);
    }

    .analytics-grid-demo {
        grid-template-columns: minmax(0, 1.05fr) minmax(22rem, 0.95fr);
    }

    .analytics-grid-bottom {
        grid-template-columns: minmax(0, 1.45fr) minmax(20rem, 0.55fr);
    }
}

@media (max-width: 767px) {
    .analytics-hero h2 {
        font-size: 1.72rem;
    }

    .analytics-hero-actions .btn-primary,
    .analytics-hero-actions .btn-secondary {
        flex: 1 1 11rem;
    }

    .analytics-panel-header {
        display: grid;
    }

    .range-control {
        justify-self: start;
        max-width: 100%;
        overflow-x: auto;
    }

    .amchart-xl,
    .amchart-lg,
    .amchart-md,
    .amchart-heat,
    .amchart-radar {
        height: 19rem;
    }

    .rate-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .rate-row em {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .chart-data-strip,
    .heatmap-readable-row {
        grid-template-columns: 1fr;
    }

    .accounts-command-row .btn-primary,
    .accounts-command-row .tab-button,
    .resource-hero .btn-primary,
    .resource-hero .btn-secondary {
        flex: 1 1 11rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .analytics-hero,
    .analytics-panel,
    .analytics-stat,
    .stat-sparkline span,
    .pulse-meter span,
    .chart-skeleton span::after {
        animation: none;
    }
}