:root {
    --ck-canvas: #F2EFE8;
    --ck-panel: #ECE8DF;
    --ck-raised: #F7F4EE;
    --ck-sheet: #FBF9F5;
    --ck-well: #E9E4DA;
    --ck-fg: #0B0B0A;
    --ck-fg-2: #3A3835;
    --ck-fg-3: #6B6B66;
    --ck-fg-4: rgba(11, 11, 10, 0.38);
    --ck-line-soft: rgba(11, 11, 10, 0.07);
    --ck-line: rgba(11, 11, 10, 0.14);
    --ck-line-strong: rgba(11, 11, 10, 0.28);
    --ck-focus: #C45C26;
    --ck-voltage: #C45C26;
    --ck-voltage-ink: #F2EFE8;
    --ck-voltage-wash: rgba(196, 92, 38, 0.05);
    --ck-ok: #3E8F68;
    --ck-wait: #6B6B66;
    --ck-warn: #A8623A;
    --ck-bad: #B2553F;
    --primary-400: 196, 92, 38;
    --primary-500: 196, 92, 38;
    --primary-600: 196, 92, 38;
}

:root.dark {
    --ck-canvas: #141413;
    --ck-panel: #191918;
    --ck-raised: #1E1E1C;
    --ck-sheet: #242422;
    --ck-well: #0F0F0E;
    --ck-fg: #F2EFE8;
    --ck-fg-2: #C8C2B6;
    --ck-fg-3: #8A8F98;
    --ck-fg-4: rgba(242, 239, 232, 0.38);
    --ck-line-soft: rgba(255, 255, 255, 0.07);
    --ck-line: rgba(255, 255, 255, 0.12);
    --ck-line-strong: rgba(255, 255, 255, 0.22);
    --ck-focus: #E8FF4D;
    --ck-voltage: #E8FF4D;
    --ck-voltage-ink: #0B0B0A;
    --ck-voltage-wash: rgba(232, 255, 77, 0.04);
    --ck-ok: #7FB89A;
    --ck-wait: #C8C2B6;
    --ck-warn: #C4906C;
    --ck-bad: #CF8A78;
    --primary-400: 232, 255, 77;
    --primary-500: 232, 255, 77;
    --primary-600: 232, 255, 77;
}

.fi-body {
    background: var(--ck-canvas);
    color: var(--ck-fg);
    font-family: Inter, system-ui, sans-serif;
}

.ck-brand {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1;
    color: var(--ck-fg);
}

.ck-brand span {
    color: var(--ck-voltage);
}

.fi-logo {
    height: auto;
}

.fi-topbar > nav,
.fi-sidebar,
.fi-sidebar-header {
    background: var(--ck-canvas);
    box-shadow: none;
}

.fi-topbar > nav {
    height: 48px;
    border-bottom: 1px solid var(--ck-line);
    --tw-ring-shadow: 0 0 #0000;
}

.fi-sidebar {
    border-inline-end: 1px solid var(--ck-line);
}

.fi-sidebar-header {
    height: 48px;
    border-bottom: 1px solid var(--ck-line);
    --tw-ring-shadow: 0 0 #0000;
}

.fi-sidebar-item-icon,
.fi-sidebar-item-grouped-border,
.fi-sidebar .fi-icon {
    display: none;
}

.fi-sidebar-group-label,
.fi-sidebar-item-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.fi-sidebar-item-label {
    color: var(--ck-fg-3);
}

.fi-sidebar-item:hover .fi-sidebar-item-label {
    color: var(--ck-fg-2);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-button {
    background: transparent;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-button .fi-sidebar-item-label {
    color: var(--ck-fg);
}

.fi-sidebar-item-button {
    position: relative;
    border-radius: 0;
    min-height: 32px;
    padding-inline-start: 22px;
    gap: 0;
    justify-content: flex-start;
}

.fi-sidebar-sub-group-items .fi-sidebar-item-button {
    padding-inline-start: 36px;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-button::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 13px;
    width: 6px;
    height: 6px;
    background: var(--ck-voltage);
}

.fi-sidebar .fi-badge {
    background: transparent;
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
    color: var(--ck-fg-2);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    padding: 0;
    min-height: 0;
}

.fi-header-heading {
    font-family: Onest, Inter, system-ui, sans-serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 32px;
    letter-spacing: -0.02em;
    color: var(--ck-fg);
}

.fi-btn {
    border-radius: 2px;
    min-height: 36px;
    box-shadow: none;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.fi-btn.fi-color-primary:not(.fi-btn-outlined) {
    background: var(--ck-voltage);
    color: var(--ck-voltage-ink);
}

.fi-btn.fi-color-primary:not(.fi-btn-outlined):hover {
    background: var(--ck-fg);
    color: var(--ck-canvas);
}

.fi-btn.fi-color-gray,
.fi-btn.fi-color-warning,
.fi-btn.fi-color-success,
.fi-btn.fi-color-info {
    background: transparent;
    color: var(--ck-fg);
    border: 1px solid var(--ck-line);
    --tw-ring-shadow: 0 0 #0000;
}

.fi-btn.fi-color-gray:hover,
.fi-btn.fi-color-warning:hover,
.fi-btn.fi-color-success:hover,
.fi-btn.fi-color-info:hover {
    background: transparent;
    border-color: var(--ck-line-strong);
}

.fi-btn.fi-color-danger:not(.fi-btn-outlined) {
    background: transparent;
    color: var(--ck-bad);
    --tw-ring-shadow: 0 0 #0000;
}

.fi-modal .fi-btn.fi-color-danger:not(.fi-btn-outlined) {
    background: var(--ck-bad);
    color: var(--ck-canvas);
}

.fi-input-wrp {
    min-height: 36px;
    border-radius: 2px;
    background: var(--ck-well);
    border: 1px solid var(--ck-line);
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
}

.fi-input-wrp:hover {
    border-color: var(--ck-line-strong);
}

.fi-input-wrp:focus-within {
    border-color: var(--ck-focus);
    box-shadow: none;
}

.fi-input-wrp.fi-invalid {
    border-color: var(--ck-bad);
}

.fi-input,
.fi-select-input,
.fi-fo-field-wrp textarea {
    color: var(--ck-fg);
    background-color: transparent;
}

.fi-input::placeholder {
    color: var(--ck-fg-4);
}

.fi-fo-field-wrp-label,
.fi-fo-field-wrp-label span {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ck-fg-3);
}

.fi-fo-field-wrp:has(.fi-invalid) .fi-fo-field-wrp-label,
.fi-fo-field-wrp:has(.fi-invalid) .fi-fo-field-wrp-label span {
    color: var(--ck-bad);
}

.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-modal-window,
.fi-dropdown-panel {
    border-radius: 2px;
    box-shadow: none;
}

.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat {
    background: transparent;
    --tw-ring-shadow: 0 0 #0000;
    border: 1px solid var(--ck-line);
}

.ck-key-stat,
.ck-run-stat {
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease;
}

.ck-key-stat .fi-wi-stats-overview-stat-value {
    font-size: 22px;
    line-height: 26px;
}

.ck-key-stat .fi-wi-stats-overview-stat-description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.ck-key-balance,
.ck-key-meta {
    display: block;
}

.ck-key-balance {
    font-family: Onest, Inter, system-ui, sans-serif;
    font-size: 14px;
    line-height: 18px;
    color: var(--ck-fg);
}

.ck-key-meta {
    color: var(--ck-fg-3);
    font-size: 12px;
    line-height: 16px;
}

.ck-key-stat:hover,
.ck-run-stat:hover {
    border-color: var(--ck-line-strong);
    background: var(--ck-voltage-wash);
}

.ck-key-stat:focus-visible,
.ck-run-stat:focus-visible {
    outline: 1px solid var(--ck-focus);
    outline-offset: 2px;
}

.ck-key-stat.is-loading {
    pointer-events: none;
    border-color: var(--ck-focus);
}

.ck-key-stat.is-loading .fi-wi-stats-overview-stat-value,
.ck-key-stat.is-loading .fi-wi-stats-overview-stat-description,
.ck-key-stat.is-loading .ck-key-balance,
.ck-key-stat.is-loading .ck-key-meta {
    position: relative;
    color: transparent;
}

.ck-key-stat.is-loading .fi-wi-stats-overview-stat-value::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 36%;
    height: 2px;
    background: var(--ck-voltage);
    animation: ck-key-scan 0.9s ease-in-out infinite;
}

.ck-key-stat.is-loading .fi-wi-stats-overview-stat-description::after {
    content: "обновление";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--ck-fg-3);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

@keyframes ck-key-scan {
    from { transform: translateX(0); }
    to { transform: translateX(180%); }
}

.fi-ta-header-cell,
.fi-ta-header-cell-sort-btn {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ck-fg-3);
}

.fi-ta-row {
    min-height: 44px;
}

.fi-ta-row:hover {
    background: var(--ck-panel);
    box-shadow: inset 0 1px 0 var(--ck-voltage);
}

.fi-ta-empty-state-icon-ctn {
    display: none;
}

.fi-ta-empty-state-heading {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ck-fg-3);
}

.fi-global-search-field .fi-input-wrp {
    width: min(360px, 60vw);
    min-height: 32px;
}

.fi-modal-window,
.fi-dropdown-panel {
    background: var(--ck-sheet);
    border: 1px solid var(--ck-line-strong);
}

.ck-run-note {
    display: grid;
    gap: 14px;
    margin: 0;
}

.ck-run-note dt {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ck-fg-3);
}

.ck-run-note dd {
    margin: 4px 0 0;
    color: var(--ck-fg);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.fi-dropdown-panel {
    background: var(--ck-raised);
}

.fi-no-notification {
    border-radius: 2px;
    box-shadow: none;
    background: var(--ck-raised);
    border: 1px solid var(--ck-line);
}

@media (prefers-reduced-motion: reduce) {
    .ck-key-stat,
    .ck-run-stat {
        transition: none;
    }

    .ck-key-stat.is-loading .fi-wi-stats-overview-stat-value::after {
        animation: none;
    }
}