:root {
    --fiwork-layout-gutter: 24px;
    --fiwork-layout-max: 1316px;
    --fiwork-page-background: #f5f7fa;

    /* Fiwork SaaS palette */
    --fiwork-color-brand: #0188ff;
    --fiwork-color-brand-hover: #0076df;
    --fiwork-color-brand-active: #0067c7;
    --fiwork-color-brand-soft: #eaf5ff;
    --fiwork-color-brand-softer: #f5faff;
    --fiwork-color-success: #20b965;
    --fiwork-color-success-hover: #179b52;
    --fiwork-color-success-soft: #eaf9f1;
    --fiwork-color-warning: #e99a18;
    --fiwork-color-warning-soft: #fff7e7;
    --fiwork-color-danger: #dc4c64;
    --fiwork-color-danger-soft: #fff0f3;
    --fiwork-color-violet: #7357d9;
    --fiwork-color-violet-soft: #f2efff;
    --fiwork-color-text: #172235;
    --fiwork-color-text-secondary: #5f6f82;
    --fiwork-color-text-muted: #66778b;
    --fiwork-color-canvas: #f5f7fa;
    --fiwork-color-surface: #fff;
    --fiwork-color-surface-subtle: #f8fafc;
    --fiwork-color-surface-muted: #f0f3f7;
    --fiwork-color-border: #e3e8ef;
    --fiwork-color-border-strong: #d4dce6;
    --fiwork-focus-ring: rgba(1, 136, 255, .34);

    /* Shared geometry and elevation */
    --fiwork-radius-sm: 10px;
    --fiwork-radius-md: 14px;
    --fiwork-radius-lg: 18px;
    --fiwork-radius-xl: 24px;
    --fiwork-shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
    --fiwork-shadow-sm: 0 5px 16px rgba(23, 34, 53, .055);
    --fiwork-shadow-md: 0 14px 34px rgba(23, 34, 53, .08);
    --fiwork-section-gap: 24px;
    --fiwork-sidebar-width: 288px;
}

.seller-level-badge {
    --seller-level-color: #6b7788;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    color: var(--seller-level-color);
    font-family: "Inter", var(--font-family), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    cursor: help;
    vertical-align: middle;
}

.seller-level-badge--rising_star { --seller-level-color: #20ae67; }
.seller-level-badge--top_rated { --seller-level-color: #237fdb; }
.seller-level-badge--top_rated_plus { --seller-level-color: #f08032; }
.seller-level-badge--custom { cursor: default; }
.seller-level-badge--custom[data-seller-level-badge] { cursor: help; }
.seller-level-badge svg { width: 17px; height: 17px; flex: 0 0 17px; }
.seller-level-badge > span:not([hidden]) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seller-level-badge--compact { font-size: 12px; }
.seller-level-badge--compact svg { width: 15px; height: 15px; flex-basis: 15px; }
.ad-container .seller-level-badge--compact { align-self: flex-start; margin: -5px 15px 9px; }
.ad-container .freelancer-container:has(+ .seller-level-badge) { margin-bottom: 0; }
.ad-container .freelancer-wrapper:has(+ .seller-level-badge) { margin-bottom: 0; }
.profile-rating-digest .seller-level-badge { margin-top: 10px; }

.seller-level-tooltip {
    position: fixed;
    z-index: 100000;
    box-sizing: border-box;
    width: min(304px, calc(100vw - 24px));
    padding: 11px 13px;
    border: 1px solid #e4e9f0;
    border-radius: 11px;
    background: #fff;
    color: #334155;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .13);
    font-family: "Inter", var(--font-family), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.45;
    pointer-events: auto;
}
.seller-level-tooltip strong {
    display: block;
    margin-bottom: 5px;
    color: #1e293b;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}
.seller-level-tooltip ul { margin: 0; padding-left: 16px; }
.seller-level-tooltip li + li { margin-top: 4px; }
.seller-level-tooltip__action {
    display: inline-block;
    margin-top: 9px;
    padding: 0 0 1px;
    border: 0;
    border-bottom: 1px dashed currentColor;
    background: transparent;
    color: #237fdb;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
.seller-level-tooltip__action:hover { color: #1266b4; }
html[data-theme="dark"] .seller-level-tooltip {
    background: #202833;
    border-color: #3c4958;
    color: #f0f3f7;
    box-shadow: 0 14px 38px rgba(0, 0, 0, .35);
}
html[data-theme="dark"] .seller-level-tooltip strong { color: #f0f3f7; }

html[data-theme="dark"] .seller-level-tooltip__action { color: #8bc5ff; }

.receive-orders-tooltip-container {
    display: inline-flex;
    align-items: center;
}
.receive-orders-tooltip-trigger {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #718096;
    cursor: help;
}
.receive-orders-tooltip-trigger:hover { color: #334155; }
.receive-orders-tooltip-trigger:focus-visible { outline: 2px solid #237fdb; outline-offset: 2px; }
.receive-orders-tooltip-container .receive-orders-tooltip-text {
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    transform: none;
    box-sizing: border-box;
    width: min(304px, calc(100vw - 24px));
    max-width: none;
    padding: 11px 13px;
    border: 1px solid #e4e9f0;
    border-radius: 11px;
    background: #fff;
    color: #334155;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .13);
    font-family: "Inter", var(--font-family), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: normal;
    z-index: 120;
}
.receive-orders-tooltip-container .receive-orders-tooltip-text::after { display: none; }
.receive-orders-tooltip-container:focus-within .receive-orders-tooltip-text {
    visibility: visible;
    opacity: 1;
}
.receive-orders-tooltip-text__paragraph { display: block; }
.receive-orders-tooltip-text__heading {
    display: block;
    margin: 8px 0 4px;
    color: #1e293b;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
}
.freelancer-reviews-container .receive-orders-container .receive-orders-tooltip-container .receive-orders-tooltip-text {
    top: calc(100% + 7px);
    right: auto;
    left: 0;
    width: min(246px, calc(100vw - 40px));
    padding: 10px 12px;
    gap: 3px;
    border-radius: 11px;
    transform: none;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .1) !important;
}
.freelancer-reviews-container .receive-orders-container .receive-orders-tooltip-text h4 {
    margin: 0;
    color: #1e293b;
    font: 600 12.5px/1.35 "Inter", var(--font-family), sans-serif;
}
.freelancer-reviews-container .receive-orders-container .receive-orders-tooltip-text p {
    margin: 0;
    color: #5f6f82;
    font: 400 12px/1.4 "Inter", var(--font-family), sans-serif;
}
html[data-theme="dark"] .freelancer-reviews-container .receive-orders-container .receive-orders-tooltip-text h4 {
    color: #f0f3f7;
}
html[data-theme="dark"] .freelancer-reviews-container .receive-orders-container .receive-orders-tooltip-text p {
    color: #b5c3d4;
}
@media (max-width: 400px) {
    .freelancer-reviews-container .receive-orders-container .receive-orders-tooltip-container .receive-orders-tooltip-text {
        right: auto;
        left: -100px;
        width: min(220px, calc(100vw - 32px));
    }
}
html[data-theme="dark"] .user-header--modern .receive-orders-tooltip-container .receive-orders-tooltip-text {
    border-color: #3c4958;
    background: #202833;
    color: #f0f3f7;
    box-shadow: 0 14px 38px rgba(0, 0, 0, .35);
}
html[data-theme="dark"] .receive-orders-tooltip-text__heading { color: #f0f3f7; }
html[data-theme="dark"] .receive-orders-tooltip-trigger { color: #b5c3d4; }
html[data-theme="dark"] .receive-orders-tooltip-trigger:hover { color: #fff; }


@media (max-width: 480px) {
    .receive-orders-tooltip-container .receive-orders-tooltip-text {
        right: -12px;
        width: min(260px, calc(100vw - 110px));
    }
}

.seller-level-progress-dialog {
    box-sizing: border-box;
    width: min(880px, calc(100vw - 32px));
    max-height: min(740px, calc(100dvh - 32px));
    margin: auto;
    padding: 26px;
    overflow: auto;
    border: 1px solid #e3e8ef;
    border-radius: 18px;
    background: #fff;
    color: #263447;
    box-shadow: 0 24px 64px rgba(17, 24, 39, .18);
    font-family: "Inter", var(--font-family), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.seller-level-progress-dialog::backdrop { background: rgba(15, 23, 42, .58); }
.seller-level-progress-dialog__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.seller-level-progress-dialog__header h2 { margin: 0; font-family: "Geologica", "Inter", sans-serif; font-size: 23px; font-weight: 600; line-height: 1.3; }
.seller-level-progress-dialog__header p { margin: 5px 0 0; color: #68788d; font-size: 13px; }
.seller-level-progress-dialog__close { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 10px; background: #f1f4f8; color: #5f6d7f; cursor: pointer; }
.seller-level-progress-dialog__close:hover { background: #e8edf4; color: #263447; }
.seller-level-progress-dialog__close svg { width: 18px; height: 18px; }
.seller-level-progress-dialog__intro { max-width: 780px; margin: 18px 0 20px; color: #556579; font-size: 13.5px; line-height: 1.55; }
.seller-level-progress-dialog__scroll { max-width: 100%; overflow-x: auto; border: 1px solid #e4e9f0; border-radius: 13px; }
.seller-level-progress-dialog table { width: 100%; min-width: 760px; border-spacing: 0; border-collapse: separate; font-size: 13px; line-height: 1.4; }
.seller-level-progress-dialog th, .seller-level-progress-dialog td { padding: 13px 12px; border-right: 1px solid #e8ecf1; border-bottom: 1px solid #e8ecf1; vertical-align: middle; }
.seller-level-progress-dialog th:last-child, .seller-level-progress-dialog td:last-child { border-right: 0; }
.seller-level-progress-dialog tbody tr:last-child th, .seller-level-progress-dialog tbody tr:last-child td { border-bottom: 0; }
.seller-level-progress-dialog thead th { background: #f7f9fc; color: #536378; font-weight: 600; text-align: center; }
.seller-level-progress-dialog thead th:first-child { text-align: left; }
.seller-level-progress-dialog tbody th { min-width: 165px; font-weight: 600; text-align: left; }
.seller-level-progress-dialog tbody tr.is-current { background: #f0faf5; }
.seller-level-progress-dialog td { text-align: center; white-space: nowrap; }
.seller-level-progress-dialog__criterion { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.seller-level-progress-dialog__result { display: inline-grid; place-items: center; width: 20px; height: 20px; vertical-align: middle; }
.seller-level-progress-dialog__result svg { width: 18px; height: 18px; }
.seller-level-progress-dialog__result.is-met { color: #1db36c; }
.seller-level-progress-dialog__result.is-unmet { color: #dc5761; }
.seller-level-progress-dialog__not-required { color: #9ca8b6; }
.seller-level-progress-dialog__star { width: 16px; height: 16px; margin-right: 5px; vertical-align: -2px; color: #6b7788; }
.seller-level-progress-dialog__star--rising_star { color: #20ae67; }
.seller-level-progress-dialog__star--top_rated { color: #237fdb; }
.seller-level-progress-dialog__star--top_rated_plus { color: #f08032; }
.seller-level-progress-dialog__asterisk { color: #dc5761; font-weight: 700; }
.seller-level-progress-dialog__note { margin: 12px 0 0; color: #738196; font-size: 12px; line-height: 1.5; }
html[data-theme="dark"] .seller-level-progress-dialog { background: #202833; border-color: #3c4958; color: #f0f3f7; }
html[data-theme="dark"] .seller-level-progress-dialog__header p,
html[data-theme="dark"] .seller-level-progress-dialog__intro,
html[data-theme="dark"] .seller-level-progress-dialog__note,
html[data-theme="dark"] .seller-level-progress-dialog thead th { color: #aebcca; }
html[data-theme="dark"] .seller-level-progress-dialog th,
html[data-theme="dark"] .seller-level-progress-dialog td { border-color: #394757; }
html[data-theme="dark"] .seller-level-progress-dialog__scroll { border-color: #394757; }
html[data-theme="dark"] .seller-level-progress-dialog thead th { background: #293442; }
html[data-theme="dark"] .seller-level-progress-dialog tbody tr.is-current { background: #213c32; }
html[data-theme="dark"] .seller-level-progress-dialog__close { background: #334153; color: #d2dbe6; }
html[data-theme="dark"] .seller-level-progress-dialog__close:hover { background: #405069; color: #fff; }
@media (max-width: 640px) {
    .seller-level-progress-dialog { width: 100vw; max-width: 100vw; max-height: 100dvh; min-height: 100dvh; padding: 22px 16px; border-radius: 0; }
    .seller-level-progress-dialog__header h2 { font-size: 21px; }
}

html,
body {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    background-color: var(--fiwork-page-background);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--fiwork-focus-ring);
    outline-offset: 2px;
}

body {
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    flex-direction: column;
}

body > .main-block {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background-color: var(--fiwork-page-background);
}

/*
 * Internal pages share one canvas and one content grid. Older page bundles
 * still contain high-specificity body/:has() background rules; keeping the
 * canvas ownership here prevents a route from changing the colour around an
 * otherwise reusable component.
 */
body.fiwork-page-inner,
body.fiwork-page-inner > .main-block {
    background-color: var(--fiwork-page-background) !important;
}

/* The home page keeps its wider composition. */
body:not(.fiwork-page-home) > .main-block {
    --fiwork-layout-max: 1276px;
}

/* Vacancy details use the same content grid as the desktop header. */
body.fiwork-vacancy-details-page > .main-block {
    --fiwork-layout-max: 1316px;
}

/*
 * The public home page uses large pastel promotional surfaces. A white canvas
 * keeps their edges and hierarchy clear, while denser workspace/catalogue
 * pages continue to use the soft grey application background above.
 */
body.fiwork-page-home,
body.fiwork-page-home > .main-block,
body.fiwork-page-home > .main-block > .main-container {
    background-color: #fff;
}

.fiwork-layout-container {
    box-sizing: border-box;
    width: calc(100% - (var(--fiwork-layout-gutter) * 2));
    max-width: var(--fiwork-layout-max);
    margin-right: auto;
    margin-left: auto;
}

/*
 * Every page receives the same outer application shell. Readable documents
 * may keep a narrower inner column, while pages marked as fiwork-wide-page use
 * the whole 1316px grid.
 */
body > .main-block > .main-container.fiwork-layout-container {
    width: calc(100% - (var(--fiwork-layout-gutter) * 2)) !important;
    max-width: var(--fiwork-layout-max) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    overflow: visible;
    background: transparent;
}

body > .main-block > .main-container.fiwork-layout-container > * {
    min-width: 0;
    box-sizing: border-box;
}

body > .main-block > .main-container.fiwork-layout-container > :where(main, section, article, .main-block) {
    margin-right: auto;
    margin-left: auto;
}

body > .main-block > .main-container.fiwork-layout-container > .fiwork-wide-page {
    width: 100%;
    max-width: none !important;
    margin-right: 0;
    margin-left: 0;
}

/*
 * Shared application workspace. Lists and management screens own their cards,
 * so the outer container must remain a neutral grid instead of another panel.
 */
body.fiwork-workspace-page > .main-block {
    min-height: calc(100vh - 260px);
    align-items: flex-start;
    overflow: visible;
}

body.fiwork-workspace-page > .main-block > .main-container.fiwork-layout-container {
    width: calc(100% - (var(--fiwork-layout-gutter) * 2)) !important;
    max-width: var(--fiwork-layout-max) !important;
    margin: 24px auto 48px !important;
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.fiwork-workspace-page > .main-block > .main-container.fiwork-layout-container > * {
    width: 100%;
}

/* Catalogue-style workspaces start flush with the content grid. */
body.fiwork-workspace-page.fiwork-settings-page > .main-block > .main-container.fiwork-layout-container {
    margin-top: 0 !important;
    margin-bottom: 40px !important;
}

.fiwork-wide-page > .main-container,
.fiwork-wide-page .fiwork-wide-content {
    width: 100%;
    max-width: none !important;
}

.fiwork-wide-page .fiwork-catalog-page__inner {
    width: 100%;
    max-width: none;
}

.computer-header--air .site-header__container.fiwork-layout-container,
.fiwork-site-footer .footer-container.fiwork-layout-container {
    width: calc(100% - (var(--fiwork-layout-gutter) * 2));
    max-width: var(--fiwork-layout-max);
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 769px) {
    body > .main-block {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .computer-header--air {
        position: sticky;
        top: 0;
        isolation: isolate;
        overflow-anchor: none;
    }

    .computer-header--air::before {
        width: calc(100% - (var(--fiwork-layout-gutter) * 2));
        max-width: var(--fiwork-layout-max);
        transition: border-radius .2s ease, box-shadow .2s ease;
    }

    .computer-header--air .nav-part2-container {
        height: 44px;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: height .2s ease, opacity .14s ease, visibility .2s ease, transform .2s ease;
    }

    .computer-header--air.is-scrolled::before {
        border-radius: 0 0 20px 20px;
        box-shadow: 0 6px 20px rgba(17, 24, 39, .09);
    }

    .computer-header--air.is-scrolled .nav-part2-container {
        height: 0;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        pointer-events: none;
    }

    /* Shared marketplace layout: one grid from header to feed. */
    .fiwork-market-shell .freelancer-proposals-layout {
        grid-template-columns: var(--fiwork-sidebar-width) minmax(0, 1fr);
        gap: var(--fiwork-section-gap);
    }
}

/*
 * Reusable SaaS surfaces. Page-specific CSS controls component anatomy; these
 * tokens keep colour, border, radius and elevation consistent across sections.
 */
body.fiwork-page-earn {
    --vacancy-ui-page: var(--fiwork-color-canvas);
    --vacancy-ui-island: var(--fiwork-color-surface);
    --vacancy-ui-surface: var(--fiwork-color-surface-muted);
    --vacancy-ui-surface-hover: #e8edf3;
    --vacancy-ui-card-hover: var(--fiwork-color-brand-softer);
    --vacancy-ui-stroke: var(--fiwork-color-border);
    --vacancy-ui-text: var(--fiwork-color-text);
    --vacancy-ui-secondary: var(--fiwork-color-text-secondary);
    --vacancy-ui-tertiary: var(--fiwork-color-text-muted);
    --vacancy-ui-label: #69788a;
    --vacancy-ui-accent: var(--fiwork-color-brand);
    --vacancy-ui-accent-hover: var(--fiwork-color-brand-hover);
    --vacancy-ui-accent-soft: var(--fiwork-color-brand-soft);
    --vacancy-ui-search-input: var(--fiwork-color-surface-subtle);
    --vacancy-ui-search-stroke: var(--fiwork-color-border);
    --vacancy-ui-positive: var(--fiwork-color-success-soft);
    --vacancy-ui-positive-text: #167a45;
    --vacancy-ui-shadow: var(--fiwork-shadow-xs);
    --vacancy-ui-shadow-hover: var(--fiwork-shadow-md);
}

.fiwork-market-shell,
.fiwork-market-shell.freelancer-proposals-page {
    color: var(--fiwork-color-text);
    background: var(--fiwork-color-canvas);
}

.fiwork-market-shell .freelancer-proposals-shell {
    width: 100%;
    max-width: none;
}

.fiwork-market-shell :is(
    .simple-task-feed-tabs,
    .vacancy-sidebar-filter,
    .freelancer-proposals-head.simple-task-promo,
    .simple-task-card,
    .earn-vacancy-card,
    .simple-task-completion-card,
    .jobs-market-connects,
    .vacancy-search-island,
    .earn-vacancies-empty
) {
    border-color: var(--fiwork-color-border);
    background-color: var(--fiwork-color-surface);
    box-shadow: var(--fiwork-shadow-xs);
}

.fiwork-market-shell :is(.simple-task-card, .earn-vacancy-card, .simple-task-completion-card) {
    border-radius: var(--fiwork-radius-lg);
}

.fiwork-market-shell .freelancer-proposals-head.simple-task-promo {
    border-radius: var(--fiwork-radius-md);
}

.fiwork-market-shell :is(.simple-task-feed-tabs, .vacancy-sidebar-filter) {
    border-radius: var(--fiwork-radius-md);
}

.fiwork-market-shell :is(.simple-task-card, .earn-vacancy-card, .simple-task-completion-card):hover {
    border-color: var(--fiwork-color-border-strong);
    box-shadow: var(--fiwork-shadow-sm);
}

.fiwork-market-shell :is(.vacancy-filter-apply, .vacancy-search-submit) {
    background: var(--fiwork-color-brand);
}

.fiwork-market-shell :is(.vacancy-filter-apply, .vacancy-search-submit):hover {
    background: var(--fiwork-color-brand-hover);
}

html[data-theme="dark"] {
    --fiwork-page-background: #101419;
    --fiwork-color-canvas: #101419;
    --fiwork-color-surface: #171d24;
    --fiwork-color-surface-subtle: #1c232c;
    --fiwork-color-surface-muted: #222a34;
    --fiwork-color-border: #2b3541;
    --fiwork-color-border-strong: #3a4654;
    --fiwork-color-text: #eef4fb;
    --fiwork-color-text-secondary: #aab6c5;
    --fiwork-color-text-muted: #7e8b9b;
    --fiwork-focus-ring: rgba(74, 168, 247, .48);
    --fiwork-color-brand-soft: rgba(1, 136, 255, .16);
    --fiwork-color-brand-softer: rgba(1, 136, 255, .08);
    --fiwork-color-success-soft: rgba(32, 185, 101, .14);
    --fiwork-shadow-xs: 0 1px 2px rgba(0, 0, 0, .18);
    --fiwork-shadow-sm: 0 8px 22px rgba(0, 0, 0, .2);
    --fiwork-shadow-md: 0 16px 38px rgba(0, 0, 0, .28);
}

@media (prefers-contrast: more) {
    :root {
        --fiwork-color-text-secondary: #44566c;
        --fiwork-color-text-muted: #52657b;
        --fiwork-color-border: #bdc8d5;
        --fiwork-color-border-strong: #9eacbc;
        --fiwork-focus-ring: #006dcc;
    }

    html[data-theme="dark"] {
        --fiwork-color-text-secondary: #d1d8e1;
        --fiwork-color-text-muted: #b5c0cc;
        --fiwork-color-border: #566473;
        --fiwork-color-border-strong: #718092;
        --fiwork-focus-ring: #74bdff;
    }
}

@media (forced-colors: active) {
    :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
        outline: 2px solid Highlight;
    }
}

@media (max-width: 768px) {
    :root {
        --fiwork-layout-gutter: 12px;
    }

    body > .main-block > .main-container.fiwork-layout-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    body.fiwork-workspace-page > .main-block > .main-container.fiwork-layout-container {
        width: calc(100% - (var(--fiwork-layout-gutter) * 2)) !important;
        margin: 14px auto 32px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .computer-header--air::before,
    .computer-header--air .nav-part2-container {
        transition: none;
    }
}

/* Lightweight navigation feedback for full-page transitions. */
.fiwork-page-progress {
    width: 100%;
    height: 3px;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2147483646;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease;
}

.fiwork-page-progress > span {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(90deg, #0188ff 0%, #2ea1ff 58%, #78c8ff 100%);
    box-shadow: 0 0 10px rgba(1, 136, 255, .32);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .5s cubic-bezier(.22, .7, .28, 1);
    will-change: transform;
}

.fiwork-page-progress.is-active {
    opacity: 1;
}

.fiwork-page-progress.is-complete {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .fiwork-page-progress,
    .fiwork-page-progress > span {
        transition-duration: .01ms;
    }
}