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

:root {
    --quark-primary: #6c5ce7;
    --quark-secondary: #4a3aff;
    --quark-bg: #0d1117;
    --quark-surface: #1a1f2b;
    --quark-border: #2d3446;
    --quark-light: #f5f6fa;
}

html,
body,
.fi-body {
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
}

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

.fi-logo {
    overflow: visible;
}

.quark-brand-mark {
    width: 2.4rem;
    height: 2.4rem;
    flex: 0 0 auto;
}

.fi-simple-header .fi-logo {
    height: auto !important;
}

.fi-simple-header .quark-brand {
    justify-content: center;
    margin-inline: auto;
}

.fi-simple-header .quark-brand-mark {
    width: 4.75rem;
    height: 4.75rem;
}

.fi-simple-header .quark-brand-name {
    font-size: 1.55rem;
}

.fi-simple-header .quark-brand-tag {
    font-size: 0.68rem;
}

.quark-brand-word {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    min-width: 0;
}

.quark-brand-name {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #111827;
}

.quark-brand-tag {
    margin-top: 0.15rem;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6c5ce7;
}

.dark .quark-brand-name,
html.dark .quark-brand-name {
    color: #fff;
}

.dark .quark-brand-tag,
html.dark .quark-brand-tag {
    color: #a5b4fc;
}

.dark .fi-body,
html.dark .fi-body,
.dark .fi-main-ctn,
html.dark .fi-main-ctn,
.dark .fi-sidebar,
html.dark .fi-sidebar {
    background-color: var(--quark-bg) !important;
}

.dark .fi-topbar,
html.dark .fi-topbar,
.dark .fi-sidebar-header,
html.dark .fi-sidebar-header {
    background-color: color-mix(in srgb, var(--quark-bg) 92%, #000) !important;
    border-color: var(--quark-border) !important;
}

.dark .fi-sidebar-nav,
html.dark .fi-sidebar-nav {
    background-color: transparent !important;
}

.dark .fi-section,
.dark .fi-ta,
.dark .fi-wi-stats-overview-stat,
.dark .fi-fo-wizard-header,
.dark .fi-modal-window,
.dark .fi-dropdown-panel,
html.dark .fi-section,
html.dark .fi-ta,
html.dark .fi-wi-stats-overview-stat,
html.dark .fi-modal-window,
html.dark .fi-dropdown-panel {
    background-color: var(--quark-surface) !important;
    border-color: var(--quark-border) !important;
}

.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
html.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.dark .fi-sidebar-item-btn[aria-current='page'],
html.dark .fi-sidebar-item-btn[aria-current='page'] {
    background: linear-gradient(135deg, var(--quark-primary), var(--quark-secondary)) !important;
    color: #fff !important;
}

.dark .fi-sidebar-item.fi-active .fi-icon,
html.dark .fi-sidebar-item.fi-active .fi-icon {
    color: #fff !important;
}

.fi-btn-primary,
.fi-ac-btn-primary {
    background: linear-gradient(135deg, var(--quark-primary), var(--quark-secondary)) !important;
    border-color: transparent !important;
}

.fi-simple-main,
.fi-simple-page {
    background:
        radial-gradient(1200px 500px at 10% -10%, rgb(108 92 231 / 0.16), transparent 50%),
        radial-gradient(900px 400px at 100% 0%, rgb(74 58 255 / 0.1), transparent 45%),
        #f5f6fa !important;
}

.fi-simple-card {
    background: #fff !important;
    border: 1px solid #e4e0f5 !important;
    box-shadow: 0 18px 50px rgb(28 16 64 / 0.08) !important;
}

.dark .fi-simple-main,
html.dark .fi-simple-main,
.dark .fi-simple-page,
html.dark .fi-simple-page {
    background:
        radial-gradient(1200px 500px at 10% -10%, rgb(108 92 231 / 0.28), transparent 50%),
        radial-gradient(900px 400px at 100% 0%, rgb(74 58 255 / 0.22), transparent 45%),
        var(--quark-bg) !important;
}

.dark .fi-simple-card,
html.dark .fi-simple-card {
    background: var(--quark-surface) !important;
    border: 1px solid var(--quark-border) !important;
    box-shadow: 0 20px 50px rgb(0 0 0 / 0.35) !important;
}

.quark-page-sidebar {
    width: 22rem;
    max-width: 100%;
}

@media (min-width: 1024px) {
    .quark-page-sidebar {
        position: sticky;
        top: 5.5rem;
        max-height: calc(100vh - 7rem);
        overflow: auto;
    }
}

.quark-html-editor,
.quark-html-editor .cm-editor,
.quark-html-editor .cm-scroller {
    min-height: calc(100vh - 14rem) !important;
}

.quark-article-editor .fi-fo-rich-editor,
.quark-article-editor .fi-fo-rich-editor-main,
.quark-article-editor .ProseMirror,
.quark-article-editor [contenteditable='true'] {
    min-height: calc(100vh - 18rem) !important;
}

.quark-docs-nav button.is-active {
    background: color-mix(in srgb, var(--quark-primary) 18%, transparent);
    color: var(--quark-primary);
}