@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700&family=Urbanist:wght@400;500;600;700;800&display=swap');

.fi-body,
.fi-simple-layout {
    background: var(--app-canvas) !important;
    color: var(--app-text);
    font-family: var(--font-ui);
}
.fi-body { --topbar-height: 4.75rem; }
.fi-sidebar,
.fi-sidebar-header { background: var(--app-nav-surface) !important; color: var(--app-nav-text); }
.fi-sidebar { border-right: 1px solid var(--app-nav-surface); }
.fi-sidebar-header-ctn { border-bottom: 1px solid rgb(255 255 255 / 10%); }
.fi-sidebar-header { position: relative; min-height: 7rem; padding: .7rem 1.25rem 1.7rem !important; box-shadow: none !important; }
.fi-sidebar-nav { padding: 1.4rem .65rem !important; }
.fi-sidebar-nav .fi-sidebar-item-btn { min-height: 2.8rem; border-radius: var(--radius-sm); }
.fi-sidebar-nav .fi-sidebar-item-btn:hover,
.fi-sidebar-nav .fi-sidebar-item-btn:focus-visible { background: var(--app-nav-surface-hover) !important; }
.fi-sidebar-nav .fi-sidebar-item-label,
.fi-sidebar-nav .fi-sidebar-item-icon { color: var(--app-nav-text-muted) !important; }
.fi-sidebar-nav .fi-active .fi-sidebar-item-btn { border-left: 3px solid var(--app-nav-accent); background: #3D3D3D !important; }
.fi-sidebar-nav .fi-active .fi-sidebar-item-label,
.fi-sidebar-nav .fi-active .fi-sidebar-item-icon { color: var(--app-nav-text) !important; }
.fi-topbar { min-height: var(--topbar-height); background: var(--app-surface) !important; border-bottom: 1px solid var(--app-border); box-shadow: none !important; }
.fi-main { max-width: 84rem; }
.fi-header-heading { display: flex; flex-direction: column; gap: .3rem; color: var(--app-text); font: 800 clamp(1.75rem, 3vw, 2.2rem)/1.2 var(--font-ui); }
.fi-header-subheading { color: var(--app-text-secondary); font-size: 1rem; }
.lynse-page-eyebrow,
.lynse-ops-kicker { color: var(--lynse-orange-hover); font: 800 .68rem/1.3 var(--font-ui); letter-spacing: .17em; }
.lynse-sidebar-brand-caption { position: absolute; bottom: .75rem; left: 1.65rem; color: var(--app-nav-text-muted); font-size: .62rem; font-weight: 800; letter-spacing: .22em; }
.lynse-sidebar-app-label { margin: 0 0 .9rem 1rem; color: var(--app-nav-text-muted); font-size: .62rem; font-weight: 800; letter-spacing: .18em; }
.lynse-sidebar-footer { margin-top: auto; padding: .9rem 1.2rem; border-top: 1px solid rgb(255 255 255 / 10%); }
.lynse-sidebar-collapse-button { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 2.5rem; padding: .4rem .7rem; border: 1px solid rgb(255 255 255 / 15%); border-radius: var(--radius-sm); color: var(--app-nav-text-muted); font: 700 .75rem var(--font-ui); text-align: left; }
.lynse-sidebar-collapse-button:hover,
.lynse-sidebar-collapse-button:focus-visible { background: var(--app-nav-surface-hover); color: var(--app-nav-text); }
.lynse-sidebar-collapse-button:focus-visible,
.fi-sidebar-item-btn:focus-visible { outline: 2px solid var(--app-nav-accent); outline-offset: 2px; }
.fi-logo { display: block !important; width: 235px !important; height: 78px !important; overflow: hidden; }
.fi-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.fi-logo .lynse-logo-on-dark,
.fi-logo .lynse-logo-mobile { display: none; }
.fi-sidebar .fi-logo .lynse-logo-on-light { display: none; }
.fi-sidebar .fi-logo .lynse-logo-on-dark { display: block; }
.lynse-sidebar-compact-brand { display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; }
.lynse-sidebar-compact-brand img { width: 3rem; height: 3rem; object-fit: contain; }
.lynse-topbar-context { display: inline-flex; align-items: center; gap: .7rem; font-size: .82rem; }
.lynse-topbar-context span { color: var(--app-text-secondary); }
.lynse-topbar-user { display: inline-flex; flex-direction: column; margin-inline-end: 1rem; line-height: 1.2; font-size: .8rem; }
.lynse-topbar-user small { color: var(--app-text-secondary); }
.lynse-ops-intro { max-width: 46rem; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--app-border); border-left: 3px solid var(--app-action); border-radius: var(--radius-md); background: var(--app-surface); }
.lynse-ops-intro h2 { margin: .65rem 0 .4rem; font: 800 1.3rem/1.2 var(--font-ui); }
.lynse-ops-intro p { margin: 0; color: var(--app-text-secondary); }

@media (max-width: 640px) {
    .fi-body { --topbar-height: 4.5rem; }
    .fi-topbar .fi-logo { width: 50px !important; height: 50px !important; }
    .fi-topbar .fi-logo .lynse-logo-on-light { display: none; }
    .fi-topbar .fi-logo .lynse-logo-mobile { display: block; }
    .fi-sidebar .fi-logo { width: 205px !important; }
    .lynse-topbar-user, .lynse-topbar-context { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .fi-btn, .fi-sidebar-item-btn { transition-duration: 0ms !important; }
}