.fi-sidebar {
    --store-nav-surface: #fff;
    --store-nav-border: #edf0f3;
    --store-nav-text: #475467;
    --store-nav-muted: #7c8798;
    --store-nav-hover: #f6f8fa;
    --store-nav-active: #fff3d6;
    --store-nav-accent: #a85b0a;
    background: var(--store-nav-surface);
    border-inline-end: 1px solid var(--store-nav-border);
}

.fi-topbar {
    background: #fff;
    border-block-end: 1px solid #edf0f3;
    box-shadow: none;
}

html:not(.dark) .fi-panel-admin {
    background: #e8ecf0;
}

html:not(.dark) .fi-panel-admin .fi-topbar {
    background: #dbe4ec;
    border-block-end-color: #becbd7;
}

.fi-sidebar .fi-sidebar-nav {
    padding: 1.5rem 1.125rem 1.25rem;
    gap: 1.5rem;
    scrollbar-width: thin;
}

.store-sidebar-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
    padding: .125rem .375rem 1.5rem;
    border-block-end: 1px solid var(--store-nav-border);
    color: #101828;
    text-decoration: none;
}

.store-sidebar-brand-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid #fde3a7;
    border-radius: .875rem;
    background: var(--store-nav-active);
    color: var(--store-nav-accent);
}

.store-sidebar-brand-icon .fi-icon { width: 1.4rem; height: 1.4rem; }
.store-sidebar-brand-copy { display: grid; min-width: 0; gap: .25rem; }
.store-sidebar-brand-copy strong { font-size: .9375rem; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.store-sidebar-brand-copy > span { color: var(--store-nav-muted); font-size: .75rem; line-height: 1.5; }

.fi-sidebar .fi-sidebar-nav-groups {
    flex: 1;
    min-height: min-content;
    margin: 0;
    gap: 1.5rem;
}

.fi-sidebar .fi-sidebar-group { gap: .625rem; flex-shrink: 0; }
.fi-sidebar .fi-sidebar-group-items { gap: .25rem; }
.fi-sidebar .fi-sidebar-group-btn { padding: 0 .875rem; }
.fi-sidebar .fi-sidebar-group-label { color: var(--store-nav-muted); font-size: .6875rem; font-weight: 650; line-height: 1.5; letter-spacing: .065em; text-transform: uppercase; }

.fi-sidebar .fi-sidebar-item-btn {
    justify-content: flex-start;
    gap: .75rem;
    min-height: 2.875rem;
    padding: .7rem .875rem;
    border-radius: .75rem;
    transition: background-color 140ms ease, color 140ms ease;
}

.fi-sidebar .fi-sidebar-item-label { color: var(--store-nav-text); font-size: .875rem; font-weight: 500; line-height: 1.5; }
.fi-sidebar .fi-sidebar-item-icon { width: 1.25rem; height: 1.25rem; color: var(--store-nav-muted); }
.fi-sidebar .fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover { background: var(--store-nav-hover); }
.fi-sidebar .fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover .fi-sidebar-item-icon { color: var(--store-nav-text); }
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background: var(--store-nav-active); box-shadow: inset 0 0 0 1px rgb(217 119 6 / 8%); }
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon,
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label { color: var(--store-nav-accent); font-weight: 650; }
.fi-sidebar .store-sidebar-settings { margin-block-start: auto; padding-block-start: 1.25rem; border-block-start: 1px solid var(--store-nav-border); }
.store-sidebar-brand:focus-visible,
.fi-sidebar .fi-sidebar-item-btn:focus-visible { outline: 2px solid #d97706; outline-offset: 2px; }
[dir="rtl"] .fi-sidebar .fi-sidebar-group-label { letter-spacing: normal; }

.dark .fi-sidebar {
    --store-nav-surface: #18181b;
    --store-nav-border: #2b2d33;
    --store-nav-text: #d4d4d8;
    --store-nav-muted: #9296a1;
    --store-nav-hover: #24252b;
    --store-nav-active: #382a17;
    --store-nav-accent: #fbbf24;
}

.dark .fi-topbar { background: #18181b; border-color: #2b2d33; }
.dark .store-sidebar-brand { color: #f4f4f5; }
.dark .store-sidebar-brand-icon { border-color: #57401d; }

@media (max-width: 1023px) {
    .fi-sidebar .fi-sidebar-nav { padding-block-start: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .fi-sidebar .fi-sidebar-item-btn { transition: none; }
}
