:root {    
    --chevron-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6L15 12L9 18' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --color-accent: #164e4d;
    --color-accent-hover: #1a5c5a;
    --color-accent-active: #134241;
    --color-accent-bg: rgba(22, 78, 77, 0.06);
    --color-accent-bg-strong: rgba(22, 78, 77, 0.08);
    --color-accent-border: rgba(22, 78, 77, 0.15);
    --color-accent-ring: rgba(22, 78, 77, 0.1);
    --color-accent-underline: rgba(22, 78, 77, 0.4);
    --color-text: #222;
    --color-text-secondary: #444;
    --color-text-muted: #666;
    --color-text-on-accent: #fff;
    --color-bg: #fff;
    --color-bg-hover: #fafafa;
    --color-bg-active: #f2f2f2;
    --color-skeleton: #ececec;
    --color-skeleton-hi: #f6f6f6;
    --color-border: #e8e8e8;
    --color-border-strong: #ccc;
    --color-border-row: #f0f0f0;
    --color-border-input: #d4d4d4;
    --color-border-input-hover: #bbb;
    --color-outline-input: #85d0f4;
    --color-active: #219653;
    --color-active-bg: rgba(33, 150, 83, 0.08);
    --color-error: #b42318;
    --color-error-dot: #e5484d;
    --color-error-bg: rgba(229, 72, 77, 0.08);
    --color-error-border: rgba(229, 72, 77, 0.2);
    --color-warning: #e8a713;
    --color-warning-text: #be5a11;
    --color-warning-bg: rgba(232, 167, 19, 0.08);
    --color-info: #2f6fed;
    --color-info-bg: rgba(47, 111, 237, 0.08);
    --color-neutral: #a8adb4;
    --color-success: #424242;
    --color-success-bg: rgba(61, 61, 61, 0.08);
    --brm: 1;
    --radius-xs: calc(4px * var(--brm));
    --radius-ti: calc(6px * var(--brm));
    --radius-sm: calc(8px * var(--brm));
    --radius-md: calc(12px * var(--brm));
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out-strong: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
    --swap-floor: 0.45;
    --font-size-h1: clamp(1.74rem, 1.25rem + 2.2vw, 2.25rem);
    --max-width: 1264px;
    --max-width: 1264px;
    --max-width-auth: 960px;
    --bar-h: 55px;
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(34, 34, 34, 0.08);}
@supports (corner-shape: squircle) {
:root { --brm: 2; }
*, *::before, *::after { corner-shape: squircle; }
}
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; scrollbar-width: thin;}
html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; scrollbar-gutter: stable;}
body {    line-height: 1.5;
    min-height: 100svh;
    -webkit-font-smoothing: antialiased;
    font-family: "Albert Sans", system-ui, sans-serif;
    font-size: 15px;
    color: var(--color-text);
    background: var(--color-bg);}
img, svg { display: block; max-width: 100%; }
input, button, textarea { font: inherit; }
img {    border-radius: var(--radius-md);}
p, h1, h2, h3, h5 {    overflow-wrap: break-word;}
h1, h2, h3 {    text-wrap: balance;}
p { text-wrap: pretty; }
a:not([class]) {    text-decoration-skip-ink: auto;
    color: currentColor;}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
html {    scrollbar-gutter: stable;}
#main-content:not(.htmx-swapping) > *:not(.hero-enter):not(:has(.docs-layout)):not(:where(#toast)) {    animation: page-enter 150ms var(--ease-out);}
@media (prefers-reduced-motion: reduce) {
#main-content > * { animation: none; }
}
h1, h2, h3 { text-wrap: balance; color: var(--color-text);}
p { overflow-wrap: break-word; color: var(--color-text-secondary); }
h1 {    font-size: var(--font-size-h1);
    font-weight: 700;
    letter-spacing: -0.03em;}
h2 {    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.01em;}
h3 {    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.01em;}
@media (max-width: 640px) {
h1, h2, h3 { hyphens: auto; }
}
p, ul>li {    font-size: 0.9375rem;
    line-height: 1.6;}
label {    color: var(--color-text-secondary);
    padding-left: 8.8px;
    font-size: 12px;}
a, button, input, textarea, [tabindex] {    outline: 3px solid transparent;
    transition: outline .12s;}
.logo {    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text);
    text-decoration: none;}
.side-nav {    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 1.5rem 12px 0;}
.side-nav > div {    display: flex;
    flex-direction: column;
    gap: 2px;}
.side-nav h5 {    font-weight: 500;
    color: var(--color-text-secondary);
    padding: 0 8px;
    margin: 0;}
.side-nav a {    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 8px;
    border-radius: var(--radius-ti);
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    text-decoration: none;}
.side-nav a:hover {    background: var(--color-bg-hover);
    color: var(--color-text);
    cursor: pointer;}
.side-nav a.active {    background: var(--color-bg-active);
    color: var(--color-text);
    font-weight: 500;}
.side-nav a svg {    width: 15px;
    height: 15px;
    flex-shrink: 0;
    opacity: 0.7;}
.side-nav a.active svg {    opacity: 1;}
.nav-user {    height: var(--bar-h);
    flex-shrink: 0;
    padding: 0 20px;
    border-top: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;}
.user {    display: flex;
    flex-direction: column;
    min-width: 0;}
.user-name {    font-size: 0.8125rem;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;}
.logout {    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.12s, background-color 0.12s;
    border-radius: var(--radius-ti);
    padding: 7px;
    margin: -7px;}
.logout svg {    width: 15px;
    height: 15px;
    opacity: 0.7;
    transition: opacity 0.12s;}
.logout:hover { color: var(--color-text); background: var(--color-bg-hover); }
.logout:hover svg { opacity: 1; }
.docs-prose {    max-width: 62ch;
    font-size: 1rem;
    color: var(--color-text-secondary);}
.sheet-body.docs-prose {    max-width: none;}
.docs-prose :is(p, li) {    font-size: 1rem;
    line-height: 1.65;}
.docs-prose > * { margin-block: 0; }
.docs-prose > * + * { margin-top: 1.125rem; }
.docs-prose > h3 + * { margin-top: 0.8125rem; }
.docs-prose > * + h3 { margin-top: 2.5rem; }
.docs-prose :is(h2, h3, h4, h5, h6) {    font-weight: 600;
    line-height: 1.35;
    color: var(--color-text);
    scroll-margin-top: calc(var(--mkt-header-h, var(--bar-h)) + 1.5rem);}
.docs-prose h3 { font-size: 1.1875rem; }
.docs-prose :is(ul, ol) {    padding-left: 1.25rem;}
.docs-prose li { margin: 0; }
.docs-prose li + li { margin-top: 0.5rem; }
.docs-prose strong {    color: var(--color-text);
    font-weight: 600;}
.burger {    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: none;
    border-radius: var(--radius-ti);
    color: var(--color-text);
    cursor: pointer;}
.burger:hover { background: var(--color-bg-hover); }
.burger-box {    position: relative;
    width: 20px;
    height: 14px;}
.burger-line {    position: absolute;
    left: 0;
    top: 50%;
    width: 20px;
    height: 1.5px;
    margin-top: -0.75px;
    background: currentColor;
    border-radius: calc(2px * var(--brm));
    transition: transform 0.25s var(--ease-out);
    will-change: transform;}
.burger-line:nth-child(1) { transform: translateY(-3px) rotate(0deg); }
.burger-line:nth-child(2) { transform: translateY(3px) rotate(0deg); }
.icon-close {    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: none;
    border-radius: var(--radius-ti);
    color: var(--color-text);
    cursor: pointer;}
.icon-close:hover { background: var(--color-bg-hover); }
.icon-close .burger-line { transition: none; }
.icon-close .burger-line:nth-child(1) { transform: rotate(45deg); }
.icon-close .burger-line:nth-child(2) { transform: rotate(-45deg); }
.drawer-scrim {    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(0, 0, 0, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;}
@media (max-width: 900px) {
.side-drawer {        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        max-width: 85vw;
        z-index: 120;
        display: flex;
        flex-direction: column;
        background: var(--color-bg);
        border-right: 1px solid var(--color-border);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
        overflow-y: auto;
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 0.25s var(--ease-out),
                    visibility 0s linear 0.25s;
    }
}
.side-drawer, .side-nav {    --nav-fade-top: 0px;
    --nav-fade-bottom: 0px;}
.brand-mark {    width: 28px;
    height: 28px;
    border-radius: calc(7px * var(--brm));
    background: var(--color-accent);
    color: #fff; 
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;}
button, a.secondary {    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-ti);
    padding: 4px 8px;
    font-size: 14px;
    font-weight: 500;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    text-decoration: none;
    color: var(--color-text);}
a {    border-radius: var(--radius-ti);}
button.primary {    border: 1px var(--color-accent) solid;
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    padding: 4px 12px;}
button.primary:hover {    border: 1px var(--color-accent-active) solid;
    background: var(--color-accent-hover);
    text-decoration: none;}
button.primary:active {    border: 1px var(--color-accent-bg) solid;
    background: var(--color-accent-active);}
button.secondary, a.secondary {    border: 1px var(--color-border-input) solid;
    background: var(--color-bg);}
button.secondary:hover, a.secondary:hover {    background: var(--color-bg-hover);
    border-color: var(--color-border-input-hover);
    text-decoration: none;}
button.secondary:active, a.secondary:active {    background: var(--color-bg-active);
    border-color: var(--color-border-input-hover);}
.button-set :is(button, a) {    white-space: nowrap;
    line-height: 20px;}
:is(button, a) svg {    flex-shrink: 0;}
.disconnect {    color: var(--color-error)}
.button-set {    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap-reverse;}
.actions-bottom {    text-align: right;}
.help {    color: var(--color-accent);
    font-size: 14px; 
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 0.3rem;
    border: none;
    background: none;
    width: fit-content;}
.help:hover {    text-decoration: underline;}
input, textarea {    border-radius: var(--radius-ti);
    border: 1px var(--color-border-input) solid;
    padding: 4px 8px;
    transition: border-color 0.24s;
    width: 100%;
    max-width: 400px;
    height: 30.6px;
    color: var(--color-text);}
textarea {    height: auto;
    min-height: 30.6px;}
.field-error {    font-size: 13px;
    margin-top: 4px;
    margin-left: 8.8px;}
.field-error { color: var(--color-error); }
.modal-backdrop {    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;}
#confirm-modal {    z-index: 130;}
.modal {    background: var(--color-bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    width: calc(400px + 4rem);
    max-width: calc(100vw - 2rem);
    padding: 2rem;}
.modal .section-header :is(h2, h3) {    margin: 0;
    font-size: 1.25rem;}
.modal-work {    
    --work-pad-x: 2rem;
    position: fixed;
    top: 0;
    right: 0;
    height: 100svh;
    height: 100dvh;
    width: min(700px, 100%);
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;}
.modal-work .section-header {    padding: 0.5rem var(--work-pad-x);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;}
.modal-work > .section-header + .section-header {    border-bottom: 0;}
.modal-work > .section-header:first-child {    height: var(--bar-h);
    padding-block: 0;}
.modal-work > .section-header:first-child h2 {    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;}
.modal-work > .section-header:first-child .button-set {    flex-wrap: nowrap;
    flex-shrink: 0;}
.modal-work > .modal-table-wrap {    flex: 1;
    min-height: 0;
    padding-bottom: 1.25rem;}
.modal-work > .modal-table-wrap {    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0 var(--work-pad-x);}
.modal-work > .modal-table-wrap::before {    right: var(--work-pad-x);}
.modal-work > .modal-table-wrap > .modal-table-scroll {    flex: 1;
    min-height: 0;
    overflow: auto;}
.work-strip-header {    display: none;}
.modal-table-wrap::before {    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 36px;
    pointer-events: none;
    background: linear-gradient(to left, var(--color-bg), rgba(255, 255, 255, 0));
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 4;}
.modal-table-scroll::after {    content: "";
    position: sticky;
    display: block;
    bottom: 0;
    left: 0;
    height: 28px;
    margin-top: -28px;
    pointer-events: none;
    background: linear-gradient(to top, var(--color-bg), rgba(255, 255, 255, 0));
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 4;}
.modal-table-wrap::before, .modal-table-scroll::after, .modal-work::after, .work-strip-header::before, .work-strip-header::after {    transform: translateZ(0);}
.modal-work > .modal-table-wrap > .modal-table-scroll thead th {    position: sticky;
    top: 0;
    background: var(--color-bg);
    z-index: 2;}
.modal-work > .modal-table-wrap > .modal-table-scroll thead th::after {    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 28px;
    pointer-events: none;
    background: linear-gradient(to bottom, var(--color-bg), rgba(255, 255, 255, 0));
    opacity: 0;
    transition: opacity 0.15s;}
.modal-work > .modal-table-wrap tbody tr {    cursor: pointer;}
@media (max-width: 640px) {
.modal {        padding: 1.25rem;
        max-width: calc(100vw - 1.5rem);
    }
.modal-work {        --work-pad-x: 1rem;
        max-width: none;
        padding: 0;
    }
.modal-work th, .modal-work td {        min-width: 0;
        padding-right: 8px;
    }
.modal-work td:first-of-type {        gap: 0.5rem;
    }
}
@media (max-width: 640px), (max-width: 900px) and (max-height: 500px) {
.modal-work {        --work-pin-h: 48px;
        display: block;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
    }
.modal-work > .section-header + .section-header {        position: sticky;
        top: 0;
        z-index: 5;
        background: var(--color-bg);
        height: var(--work-pin-h);
        padding-block: 0;
    }
.modal-work > .modal-table-wrap {        display: block;
    }
.work-strip .work-strip-header {        position: absolute;
        top: 100%;
        left: var(--work-pad-x);
        right: var(--work-pad-x);
        overflow: hidden;
        padding-bottom: 28px;
        pointer-events: none;
    }
.work-strip-header::before {        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 28px;
        background: linear-gradient(to bottom, var(--color-bg), rgba(255, 255, 255, 0));
    }
.work-strip-header::after {        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 28px;
        width: 36px;
        pointer-events: none;
        background: linear-gradient(to left, var(--color-bg), rgba(255, 255, 255, 0));
        opacity: 0;
        transition: opacity 0.15s;
        z-index: 4;
    }
@supports (animation-timeline: scroll()) {
.modal-work {            timeline-scope: --table-x;
        }
.modal-work > .modal-table-wrap > .modal-table-scroll {            scroll-timeline: --table-x x;
        }
.work-strip .work-strip-header {            container-type: inline-size;
            --clone-track-end: calc(-100% + 100cqw);
        }
}
.modal-work::after {        content: "";
        position: sticky;
        display: block;
        bottom: 0;
        height: 28px;
        margin-top: -28px;
        pointer-events: none;
        background: linear-gradient(to top, var(--color-bg), rgba(255, 255, 255, 0));
        opacity: 0;
        transition: opacity 0.15s;
        z-index: 4;
    }
}
@media (max-width: 640px) {
.modal-work {        --fold-max: calc(min(320px, 58vw) - 45vw);
        --fold-clip: min(calc(var(--scroll-x, 0px) * 2), var(--fold-max));
        --fold-edge: calc(min(320px, 58vw) + 20px - var(--fold-clip));
    }
.modal-work > .modal-table-wrap > .modal-table-scroll th.col-product {        width: calc(min(320px, 58vw) + 20px);
    }
.modal-work > .modal-table-wrap > .modal-table-scroll td:first-of-type, .modal-work > .modal-table-wrap > .modal-table-scroll th.col-product {        position: sticky;
        left: 0;
        background: var(--color-bg);
        z-index: 1;
    }
@media (hover: hover) {
.modal-work > .modal-table-wrap > .modal-table-scroll tbody tr:hover td:first-of-type {            background: var(--color-bg-hover);
        }
}
.modal-work > .modal-table-wrap > .modal-table-scroll td:first-of-type, .modal-work th.col-product {        clip-path: inset(0 var(--fold-clip, 0px) 0 0);
    }
@supports (animation-timeline: scroll()) {
.modal-work > .modal-table-wrap > .modal-table-scroll td:first-of-type, .modal-work th.col-product {            animation: col-fold-clip linear both;
            animation-timeline: --table-x;
            animation-range: 0 calc((min(320px, 58vw) - 45vw) / 2);
        }
}
.modal-work {        --fold-text-start: 80px;
    }
}
@media (max-width: 400px) {
.modal-work > .modal-table-wrap {        padding: 0;
    }
.modal-work > .modal-table-wrap::before {        right: 0;
    }
.modal-work > .modal-table-wrap > .modal-table-scroll > table {        margin: 0 1rem;
    }
.work-strip .work-strip-header {        left: 0;
        right: 0;
        --clone-track-end: calc(-100% - 2rem + 100cqw);
    }
}
.modal-backdrop {    opacity: 1;
    transition: opacity 0.18s var(--ease-out);}
.modal-backdrop .modal {    opacity: 1;
    transform: none;
    transition: opacity 0.18s var(--ease-out-strong),
                transform 0.18s var(--ease-out-strong);}
@starting-style  {    .modal-backdrop {
        opacity: 0;
    }
    .modal-backdrop .modal {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }}
.modal-backdrop .modal-work {    transform: none;
    transition: transform 0.3s var(--ease-drawer);}
@starting-style  {    .modal-backdrop .modal-work {
        transform: translateX(100%);
    }}
body.app {    display: flex;}
:where(body.app) main {    flex: 1;
    min-width: 0;
    width: 100%;
    padding: 2.5rem 2.5rem 4rem;}
:where(body.app) #nav-progress {    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 400;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.1s linear;}
:where(body.app) #nav-progress > span {    display: block;
    width: 25%;
    height: 100%;
    background: var(--color-accent);
    animation: nav-progress-sweep 1.1s linear infinite;}
@media (prefers-reduced-motion: reduce) {
:where(body.app) #nav-progress > span {        width: 100%;
        animation: none;
    }
}
:where(body.app) .page-bar { display: none; }
@media (min-width: 901px) {
:where(body.app) .page-bar {        --page-bar-h: var(--bar-h);
        position: sticky;
        top: 0;
        z-index: 45;   
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: var(--page-bar-h);
        margin-left: -2.5rem;
        margin-right: -2.5rem;
        padding: 0 2.5rem;
        margin-bottom: calc(var(--page-bar-h) * -1);
        background: var(--color-bg);
        border-bottom: 1px solid var(--color-border);
        visibility: hidden;
        transform: translateY(-100%);
        pointer-events: none;
        transition: transform 0.15s var(--ease-out),
                    visibility 0s 0.15s;
        will-change: transform;
    }
}
@media (prefers-reduced-motion: reduce) {
:where(body.app) .page-bar { transition: none; }
}
:where(body.app) aside {    width: 240px;
    flex-shrink: 0;
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100svh;
    overflow-y: auto;}
:where(body.app) .brand {    height: var(--bar-h);
    flex-shrink: 0;
    padding: 0 20px;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;}
:where(body.app) .side-nav {    flex: 1; 
    min-height: 0;
    overflow-y: auto;}
:where(body.app) .app-topbar { display: none; }
@media (max-width: 900px) {
body.app { display: block; }
:where(body.app) aside { height: auto; }
:where(body.app) .app-topbar {        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        position: sticky;
        top: 0;
        z-index: 50;
        background: var(--color-bg);
        border-bottom: 1px solid var(--color-border);
        height: var(--bar-h);
        padding: 0 0.75rem;
    }
:where(body.app) .app-topbar .burger { display: inline-flex; flex-shrink: 0; }
:where(body.app) .app-topbar-actions {        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 4px;
        min-width: 0;
    }
:where(body.app) #main-content > .space-between:has(> h1) > :not(h1) {        display: none;
    }
:where(body.app) main { padding: 1.25rem 1rem 2.5rem; }
}
@media (max-width: 900px) and (max-height: 500px) {
:where(body.app) .app-topbar { position: static; }
}
:where(body.app) .nav-collapse {    margin-top: auto; 
    margin-bottom: 2px;}
:where(body.app) .nav-collapse-btn {    display: flex;
    width: 100%;
    align-items: center;
    gap: 9px;
    padding: 4px 8px;
    border: none;
    background: none;
    font-weight: 400;
    color: var(--color-text-secondary);}
:where(body.app) .nav-collapse-btn:hover {    background: var(--color-bg-hover);
    color: var(--color-text);}
:where(body.app) .nav-collapse-btn svg {    width: 15px;
    height: 15px;
    flex-shrink: 0;
    opacity: 0.7;}
@media (max-width: 900px) {
:where(body.app) .side-nav .nav-collapse { display: none; }
}
@media (min-width: 901px) {
:where(body.app) aside {        transition: width 0.2s var(--ease-out);
    }
:where(body.app) .side-nav h5 { width: 100%; }
:where(body.app) aside .brand, :where(body.app) aside .nav-user, :where(body.app) .side-nav a, :where(body.app) .side-nav h5, :where(body.app) .nav-collapse-btn {        overflow: hidden;
    }
:where(body.app) .brand .logo-word, :where(body.app) .side-nav a > span, :where(body.app) .side-nav h5, :where(body.app) .nav-collapse-btn > span {        white-space: nowrap;
    }
:where(body.app) .brand .logo-word, :where(body.app) .side-nav a > span, :where(body.app) .side-nav h5, :where(body.app) .nav-collapse-btn > span {        transition: opacity 0.2s var(--ease-out);
    }
:where(body.app) .nav-user .user {        
        max-width: 100%;
        transition: flex-shrink 0s 0.2s, opacity 0.2s var(--ease-out);
    }
:where(body.app) .brand {        transition: padding 0.2s var(--ease-out);
    }
}
@media (prefers-reduced-motion: reduce) {
:where(body.app) aside, :where(body.app) .brand, :where(body.app) .nav-user .user { transition: none; }
}
:where(body.app) table {    border-collapse: collapse;
    width: 100%;}
:where(body.app) th {    font-weight: 500;
    text-align: left;}
:where(body.app) th, :where(body.app) td {    padding: 4px 16px 4px 8px;
    min-width: 95px;
    max-width: 430px;}
:where(body.app) th:last-of-type, :where(body.app) td:last-of-type {    text-align: right;}
:where(body.app) th:last-of-type, :where(body.app) td:last-of-type {    padding-right: 8px;}
:where(body.app) th:nth-child(-n+1) {    max-width: 325px;}
:where(body.app) td:first-of-type {    display: flex;
    align-items: center;
    gap: 1rem;
    height: var(--table-row-h);}
:where(body.app) tr {    border-bottom: 1px solid var(--color-border);
    height: 3rem;}
:where(body.app) tbody tr {    background: var(--color-bg);
    transition: background 0.12s;}
@media (hover: hover) {
:where(body.app) tbody tr:hover {        background: var(--color-bg-hover);
    }
}
:where(body.app) thead th {    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--color-text-secondary);
    white-space: nowrap;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;}
:where(body.app) thead tr {    height: auto;}
:where(body.app) .modal-work th.col-num {    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;}
:where(body.app) .sheet-backdrop {    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s var(--ease-out-strong);}
:where(body.app) .sheet {    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 100%);
    width: min(calc(62ch + 5rem), calc(100vw - 2rem));
    height: calc(100svh - 4rem);
    height: calc(100dvh - 4rem);
    background: var(--color-bg);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    z-index: 100;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.28s var(--ease-out-strong),
                box-shadow 0.28s var(--ease-out-strong);}
:where(body.app) .sheet-header {    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 2rem 2rem 1rem;}
:where(body.app) .sheet-header h2 {    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text);}
:where(body.app) .sheet-actions {    flex-shrink: 0;}
:where(body.app) .sheet-body {    flex: 1;
    overflow-y: auto;
    scrollbar-gutter: stable both-edges;
    padding: 0 1.5rem;
    --sheet-fade: 2rem;}
:where(body.app) .sheet-body::before, :where(body.app) .sheet-body::after {    content: "";
    position: sticky;
    display: block;
    height: var(--sheet-fade);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 4;}
:where(body.app) .sheet-body::before {    top: 0;
    margin-bottom: calc(-1 * var(--sheet-fade));
    background: linear-gradient(to bottom, var(--color-bg), rgba(255, 255, 255, 0));}
:where(body.app) .sheet-body::after {    bottom: 0;
    background: linear-gradient(to top, var(--color-bg), rgba(255, 255, 255, 0));}
@media (max-width: 640px) {
:where(body.app) .sheet {        width: 100vw;
        height: calc(100svh - 2.5rem);
        height: calc(100dvh - 2.5rem);
    }
:where(body.app) .sheet-header {        padding: 1rem 1rem 0.75rem;
    }
:where(body.app) .sheet-body {        padding: 0 1rem;
        --sheet-fade: 1.5rem;
    }
}
:where(body.app) .space-between {    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;}
:where(body.app) .space-between:has(> h1) > .help {    min-width: 0;}
:where(body.app) .space-between:has(> h1) > h1 {    min-width: 0;}
:where(body.app) .section-header {    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;}
:where(body.app) #contact-modal {    z-index: 200;}
:where(body.app) .kpi-grid {    display: grid;
    grid-template-columns: repeat(auto-fit, 275px);
    gap: 1rem;}
@media (max-width: 640px) {
:where(body.app) .kpi-grid {        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}
:where(body.app) .kpi-tile {    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;}
:where(body.app) .kpi-label {    font-size: 13px;
    color: var(--color-text-muted);
    font-weight: 500;}
:where(body.app) .kpi-value {    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.02em;}
:where(body.app) .kpi-sub {    font-size: 12px;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;}
:where(body.app) .kpi-value.is-zero {    color: var(--color-text-muted);}
:where(body.app) .action-queue {    margin: 0.5rem 0 0;}
:where(body.app) .action-row {    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-border-row);}
:where(body.app) .action-row:last-child {    border-bottom: none;}
:where(body.app) .action-msg {    flex: 1 1 auto;
    min-width: 0;}
:where(body.app) .action-link {    white-space: nowrap;
    margin-left: auto;   }
:where(body.app) .action-row.tier-warning, :where(body.app) .action-row.tier-info {    
    width: fit-content;
    max-width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid;
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;}
:where(body.app) .action-row.tier-warning:last-child, :where(body.app) .action-row.tier-info:last-child {    margin-bottom: 0;}
:where(body.app) .action-row.tier-warning {    background: var(--color-warning-bg);
    border-color: rgba(232, 167, 19, 0.3);}
:where(body.app) .action-row.tier-info {    background: var(--color-info-bg);
    border-color: rgba(47, 111, 237, 0.25);}
@media (max-width: 640px) {
:where(body.app) .action-row.tier-warning, :where(body.app) .action-row.tier-info {        width: auto;
    }
}
:where(body.app) .section-actions {    margin: 0;}
:root {    --table-row-h: 58.8px;   
    --gap-tight:   0.25rem;  
    --gap-row:     0.5rem;   
    --gap-bind:    1rem;     
    --gap-open:    1.5rem;   
    --gap-section: 3rem;     }
:where(body.app) #main-content
  > :not(:where([hidden], #toast, .modal-backdrop, .sheet, .page-bar, style, template, script))
  ~ :not(:where([hidden], #toast, .modal-backdrop, .sheet, .page-bar, style, template, script)) {    margin-top: var(--gap-open);}
:where(body.app) #main-content > section ~ section { margin-top: var(--gap-section); }
:where(body.app) section ~ section { margin-top: var(--gap-section); }
:where(body.app) :not(:where([hidden], .page-bar, style, template, script)) ~ section { margin-top: var(--gap-open); }
:where(body.app) section > .kpi-grid ~ * { margin-top: var(--gap-open); }
:where(body.app) .modal.qc-review { max-height: calc(100svh - 3rem); overflow-y: auto; }
:where(body.app) .qc-review .section-header { gap: 2rem; }
:where(body.app) .qcr-product { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; }
:where(body.app) .qcr-product img { width: 48px; height: 48px; object-fit: contain; border-radius: var(--radius-ti); border: 1px solid var(--color-border); }
:where(body.app) .qcr-product-text { display: flex; flex-direction: column; min-width: 0; }
:where(body.app) .qcr-photos { margin-top: 1rem; }
:where(body.app) .qcr-photos a { display: flex; width: fit-content;}
:where(body.app) #qcr-photo { display: block; width: auto; max-height: 300px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-bg-hover); }
:where(body.app) #unk-photo { display: block; width: auto; max-height: 300px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-bg-hover); }
:where(body.app) #qcr-photo-note { margin-top: 0.4rem; }
:where(body.app) .qcr-thumbs { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
:where(body.app) #unk-subheader {    margin-top: 0.35rem;}
:where(body.app) #unk-supplier {    margin-top: 0.15rem;}
:where(body.app) .unk-view-help {    margin: 0.75rem 0 1rem;}
:where(body.app) .unk-label {    display: block;
    font-size: 0.875rem;
    color: var(--color-text-secondary);}
:where(body.app) #unk-title-input {    width: 100%;}
:where(body.app) #unk-suggest-head + #unk-suggest-list { margin-top: var(--gap-row); }
:where(body.app) #unknown-picker-modal {    z-index: 125;}
:where(body.app) section > *, :where(body.app) .modal:not(:where(.modal-work)) > *, :where(body.app) .flow > * {    margin-block: 0;}
:where(body.app) section > :not(:where([hidden], style, template, script))
        ~ :not(:where([hidden], style, template, script)), :where(body.app) .modal:not(:where(.modal-work))
        > :not(:where([hidden], style, template, script))
        ~ :not(:where([hidden], style, template, script)), :where(body.app) .flow > :not(:where([hidden], style, template, script))
      ~ :not(:where([hidden], style, template, script)) {    margin-top: var(--gap-bind);}
:where(body.app) .flow > .section-header h2 {    margin-bottom: 0;}
:where(body.app) :not(:where(.docs-prose, .verdict-issues)) > li + li {    margin-top: var(--gap-row);}
@keyframes page-enter {    from { opacity: var(--swap-floor); }}
@keyframes nav-progress-sweep {    from { transform: translateX(-100%); }
    to   { transform: translateX(400%); }}
@keyframes col-fold-clip {    from { clip-path: inset(0 0 0 0); }
    to   { clip-path: inset(0 calc(min(320px, 58vw) - 45vw) 0 0); }}