@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.84wtju4z0n.bundle.scp.css';

/* /Layout/HeaderBar.razor.rz.scp.css */
.tv-header-bar[b-log6r13505] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1;
    justify-content: flex-end;
}

.tv-header-bar__switcher[b-log6r13505] {
    margin-right: auto;
}

.tv-header-bar__search[b-log6r13505] {
    flex: 1;
    max-width: 20rem;
    min-width: 0;
    display: flex;
    align-items: center;
}

[b-log6r13505] .tv-header-bar__search-input {
    width: 100%;
}

.tv-header-bar__actions[b-log6r13505] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.tv-header-bar__theme-btn[b-log6r13505] {
    flex-shrink: 0;
}

.tv-header-bar__user-menu-btn[b-log6r13505] {
    flex-shrink: 0;
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .tv-header-bar__search[b-log6r13505] {
        display: none;
    }

    .tv-header-bar__desktop-only[b-log6r13505] {
        display: none;
    }

    .tv-header-bar__user-menu-btn[b-log6r13505] {
        max-width: 5rem;
    }
}
/* /Layout/Help/HelpPanel.razor.rz.scp.css */
/* Fixed, so it stays reachable however far the page scrolls. Its z-index comes from the shared stacking
   tokens rather than a local number: the trigger has to sit above the mobile tab bar and the panel above
   both, and the pieces that could disagree live in components that cannot see each other. */
.help-panel-trigger[b-iz3mqatwc3] {
    position: fixed;
    inset-block-end: var(--space-4);
    inset-inline-end: var(--space-4);
    z-index: var(--layer-overlay);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--help-trigger-size);
    height: var(--help-trigger-size);
    border: none;
    border-radius: var(--radius-pill);
    background: var(--color-brand-header);
    color: var(--color-text-on-brand);
    box-shadow: var(--shadow-elevated);
    cursor: pointer;
}

/*
  In the host's chrome instead of the corner: static, so it takes its place in the header's own row, and
  transparent, because a filled circle beside the bell and the user menu reads as a different kind of control
  than the two it sits next to.

  44px because that is the floor for a touch target, and this variant is now used on the public review page,
  which a client opens on a phone. It was 40px while the only host was the desktop app shell — small enough to
  break the rule and never be noticed there.
*/
.help-panel-trigger--header[b-iz3mqatwc3] {
    position: static;
    width: 44px;
    height: 44px;
    min-width: 44px;
    background: transparent;
    color: var(--color-text-on-brand);
    box-shadow: none;
}

.help-panel-trigger--header:hover[b-iz3mqatwc3] {
    background: var(--color-on-brand-tint);
}

.help-panel-trigger:hover[b-iz3mqatwc3] {
    background: var(--color-link-hover);
}

@media (pointer: coarse) {
    .help-panel-trigger:hover[b-iz3mqatwc3] {
        background: var(--color-brand-header);
    }

    .help-panel-trigger:active[b-iz3mqatwc3] {
        background: var(--color-link-hover);
    }
}

.help-panel-trigger:focus-visible[b-iz3mqatwc3] {
    outline: 2px solid var(--color-brand-yellow);
    outline-offset: 2px;
}

/* Above the mobile tab bar, which would otherwise cover the button on a phone. */
@media (max-width: 640px) {
    .help-panel-trigger[b-iz3mqatwc3] {
        inset-block-end: calc(var(--space-4) + var(--bottom-tab-bar-height));
    }
}

.help-panel-scrim[b-iz3mqatwc3] {
    position: fixed;
    inset: 0;
    z-index: var(--layer-overlay-backdrop);
    background: var(--color-scrim);
}

.help-panel[b-iz3mqatwc3] {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: var(--layer-overlay);
    display: flex;
    flex-direction: column;
    width: min(420px, 100vw);
    background: var(--color-bg-elevated);
    box-shadow: var(--shadow-elevated);
}

.help-panel-header[b-iz3mqatwc3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--color-brand-header);
    color: var(--color-text-on-brand);
}

.help-panel-title[b-iz3mqatwc3] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 18px;
}

.help-panel-close[b-iz3mqatwc3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.help-panel-close:hover[b-iz3mqatwc3] {
    background: rgb(255 255 255 / 12%);
}

.help-panel-body[b-iz3mqatwc3] {
    padding: var(--space-4);
    overflow-y: auto;
    font-family: var(--font-base);
    color: var(--color-text-primary);
}

.help-panel-intro[b-iz3mqatwc3] {
    margin: 0 0 var(--space-3);
    font-size: 14px;
}

.help-panel-list[b-iz3mqatwc3] {
    margin: 0;
    padding-inline-start: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: 14px;
}
/* /Layout/MainLayout.razor.rz.scp.css */
.main-layout-root[b-yzgk7rkgkn] {
    min-height: 100dvh;
    background-color: var(--color-bg-surface);
    color: var(--color-text-primary);
}

/* FluentLayout renders as <div class="layout">, so the element-name selector this used to carry matched
   nothing. A fixed viewport height here is what lets the column below the header grow instead of the page
   scrolling. */
[b-yzgk7rkgkn] .layout {
    height: 100dvh;
}

/*
  FluentHeader renders as <header class="header"> and ships its own accent blue, which is not the
  product's colour — the reference design puts the dark brand green across the top. Both selectors
  are listed because the element name has changed between Fluent versions before.
*/
[b-yzgk7rkgkn] fluent-header,
[b-yzgk7rkgkn] header.header {
    background-color: var(--color-brand-header);
    color: var(--color-text-on-brand);
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0 var(--space-4);
}

/* Whatever the current page contributes to the top bar, sitting left of the bell and the user menu. Empty on
   most pages, which is why it collapses instead of reserving space. */
.main-layout-header-actions[b-yzgk7rkgkn] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-inline-end: var(--space-3);
}

.main-layout-header-actions:empty[b-yzgk7rkgkn] {
    display: none;
    margin-inline-end: 0;
}

/*
  The page's own strip: its breadcrumb and its page-level actions, at full width above both columns.
  Its own tone on purpose — three surfaces, three colours, top bar to strip to content — because the strip
  sharing the top bar's green is what made it read as part of the chrome rather than as part of the page.
*/
.main-layout-page-bar[b-yzgk7rkgkn] {
    flex: 0 0 auto;
    background: var(--color-brand-stage);
    color: var(--color-text-on-brand);
}

/* Most pages contribute nothing, and an empty strip must take no height. */
.main-layout-page-bar:empty[b-yzgk7rkgkn] {
    display: none;
}

/* Grows into whatever the header and the page bar leave, rather than assuming a header height. The old
   calc(100vh - 50px) had the bar's height unaccounted for and pushed the column off the bottom. */
[b-yzgk7rkgkn] .main-content {
    flex: 1 1 auto;
    min-height: 0;
}

[b-yzgk7rkgkn] .body-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4);
}

/* ---------------------------------------------------------------------------
   Responsive navigation.

   BottomNavigation deliberately ships without positioning or visibility rules —
   it styles its own internals and leaves placement to whichever layout hosts it.
   That is this file. Without these rules the bar renders as a plain <nav> and
   flows as a third column inside the horizontal stack, next to the side menu.

   These three breakpoints are binding for the whole product, not a preference of
   this file, and media queries cannot be covered by bUnit — changing them needs a
   real browser at 1440 / 1024 / 900 / 700 / 640 / 390 px before it is done:
     >= 1024px  full side navigation, multi-column grids
     641-1023px icon-only side navigation, at most two columns
     <= 640px   bottom tab bar with four entries, side navigation hidden,
                tables collapse into card stacks
   --------------------------------------------------------------------------- */

[b-yzgk7rkgkn] .bottom-nav {
    display: none;
}

@media (max-width: 1023px) and (min-width: 641px) {
    [b-yzgk7rkgkn] .side-nav-text,
    [b-yzgk7rkgkn] .side-nav-section {
        display: none;
    }

    /* FluentNavMenu renders its Width parameter as an inline style on .fluent-nav-menu, so this
       is the one case where !important is the only lever — the alternative would be driving the
       parameter from a JS media-query listener, which flickers on every resize. */
    [b-yzgk7rkgkn] .side-nav .fluent-nav-menu {
        width: 64px !important;
    }

    /* Centre the icons once their labels are gone. */
    [b-yzgk7rkgkn] .side-nav .fluent-nav-link {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 640px) {
    /* Qualified through .main-content on purpose: SideNavigation styles its own root element
       (`.side-nav[b-…] { display: flex }`), which carries the same specificity as a bare
       `::deep .side-nav` from here and wins on source order. The extra ancestor outranks it. */
    [b-yzgk7rkgkn] .main-content .side-nav {
        display: none;
    }

    [b-yzgk7rkgkn] .bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: var(--layer-bottom-nav);
        height: calc(var(--bottom-tab-bar-height) + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-sizing: border-box;
        background: var(--color-bg-elevated);
        border-top: 1px solid var(--color-border);
    }

    /* Keep the last line of content clear of the fixed bar. */
    [b-yzgk7rkgkn] .body-content {
        padding-bottom: calc(var(--bottom-tab-bar-height) + env(safe-area-inset-bottom, 0px) + var(--space-4));
    }

    /* The "More" sheet deliberately covers the bar rather than sitting above it: it is modal and
       carries its own backdrop, so the tabs underneath are inert while it is open. */
}

.main-layout-more-controls[b-yzgk7rkgkn] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-bottom: var(--space-2);
}

.main-layout-more-theme[b-yzgk7rkgkn] {
    display: flex;
    align-items: center;
}
/* /Layout/Navigation/BottomNavigation.razor.rz.scp.css */
/* The host positions and shows/hides the `.bottom-nav` root (e.g. a fixed bottom bar revealed
   only on small screens). This file owns the internal appearance of the tabs and the "More" sheet.
   The sheet is rendered as a sibling of the bar so its fixed backdrop covers the full viewport — do
   not place the component inside a `position: fixed`/transformed wrapper. */

/* ----- bottom tabs ----- */
[b-s6octuh0qk] .bottom-nav-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-decoration: none;
    color: var(--color-text-secondary);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    padding: 6px 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.15s ease, color 0.15s ease;
}

[b-s6octuh0qk] .bottom-nav-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

[b-s6octuh0qk] .bottom-nav-tab-icon svg {
    width: 24px;
    height: 24px;
}

[b-s6octuh0qk] .bottom-nav-tab-label {
    line-height: 1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-s6octuh0qk] .bottom-nav-tab.active,
[b-s6octuh0qk] .bottom-nav-more.more-active {
    color: var(--color-accent);
    font-weight: 700;
    background: var(--color-bg-selected);
}

[b-s6octuh0qk] .bottom-nav-tab.active .bottom-nav-tab-icon {
    color: var(--color-accent);
}

[b-s6octuh0qk] .bottom-nav-tab:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: -2px;
}

/* ----- "More" sheet ----- */
.more-sheet-backdrop[b-s6octuh0qk] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--layer-nav-sheet-backdrop);
}

.more-sheet-sheet[b-s6octuh0qk] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--layer-nav-sheet);
    background: var(--color-bg-elevated);
    border-top: 1px solid var(--color-border);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    padding: var(--space-2) 0 var(--space-4);
    animation: more-sheet-slide-up-b-s6octuh0qk 0.2s ease;
}

@keyframes more-sheet-slide-up-b-s6octuh0qk {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.more-sheet-handle[b-s6octuh0qk] {
    width: 36px;
    height: 4px;
    background: var(--color-border-strong);
    border-radius: var(--radius-pill);
    margin: 0 auto var(--space-2);
}

.more-sheet-title[b-s6octuh0qk] {
    padding: var(--space-1) var(--space-4) var(--space-2);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}

.more-sheet-nav[b-s6octuh0qk] {
    display: flex;
    flex-direction: column;
}

[b-s6octuh0qk] .more-sheet-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    box-sizing: border-box;
    padding: 14px var(--space-4);
    min-height: 52px;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-primary);
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
}

[b-s6octuh0qk] .more-sheet-item:hover {
    background: var(--color-bg-hover);
}

[b-s6octuh0qk] .more-sheet-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    flex-shrink: 0;
    color: var(--color-text-secondary);
}

[b-s6octuh0qk] .more-sheet-item-text {
    flex: 1;
    min-width: 0;
}

[b-s6octuh0qk] .more-sheet-chevron {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--color-text-muted);
}

[b-s6octuh0qk] .more-sheet-item.active {
    color: var(--color-accent);
    font-weight: 600;
}

[b-s6octuh0qk] .more-sheet-item.active .more-sheet-item-icon {
    color: var(--color-accent);
}

[b-s6octuh0qk] .more-sheet-action {
    margin-top: var(--space-1);
    border-top: 1px solid var(--color-border);
}

[b-s6octuh0qk] .more-sheet-danger {
    color: var(--color-danger);
}

[b-s6octuh0qk] .more-sheet-danger .more-sheet-item-icon {
    color: var(--color-danger);
}

[b-s6octuh0qk] .more-sheet-danger:hover {
    background: var(--color-danger-bg);
}

.more-sheet-back[b-s6octuh0qk] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-2) var(--space-4);
    margin-bottom: var(--space-1);
    min-height: 44px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    color: var(--color-text-primary);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
}

.more-sheet-back:hover[b-s6octuh0qk] {
    background: var(--color-bg-hover);
}

.more-sheet-back:focus-visible[b-s6octuh0qk] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: -2px;
}

.more-sheet-content[b-s6octuh0qk] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}
/* /Layout/Navigation/SideNavigation.razor.rz.scp.css */
/*
  A surface of its own, because the rail and the content column were both falling through to the app
  background and the boundary between them existed only where a nav item happened to be highlighted.
  Placement and visibility still belong to the hosting layout — this is the component's own appearance.
*/
.side-nav[b-krayckwofe] {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Nine entries need more room than a short viewport gives — a landscape phone, or a small desktop window.
       The rail scrolls itself rather than pushing the page taller than the screen. */
    min-height: 0;
    overflow-y: auto;
    background: var(--color-bg-elevated);
    border-right: 1px solid var(--color-border);
}

[b-krayckwofe] .side-nav-divider {
    margin: 0.5rem 0;
}

[b-krayckwofe] .side-nav-section {
    padding: 8px 16px 4px;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}

[b-krayckwofe] fluent-nav-link[active],
[b-krayckwofe] fluent-nav-link[aria-current] {
    background: var(--color-bg-selected);
    border-left: 3px solid var(--color-accent);
}

[b-krayckwofe] fluent-nav-link:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: -2px;
}

[b-krayckwofe] .side-nav-danger {
    color: var(--color-danger);
}

.side-nav.collapsed[b-krayckwofe]  .side-nav-text {
    display: none;
}
/* /Modules/Authentication/Pages/AcceptInvitation.razor.rz.scp.css */
.accept-invitation-container[b-wwjzkel49t] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.accept-invitation-card[b-wwjzkel49t] {
    width: 100%;
    max-width: 460px;
    padding: 32px;
}

.form-stack[b-wwjzkel49t] {
    gap: 16px;
}

.full-width[b-wwjzkel49t] {
    width: 100%;
}
/* /Modules/Authentication/Pages/ForgotPassword.razor.rz.scp.css */
.forgot-password-container[b-y7uk2bbdf9] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.forgot-password-card[b-y7uk2bbdf9] {
    width: 100%;
    max-width: 420px;
    padding: 32px;
}

.form-stack[b-y7uk2bbdf9] {
    gap: 16px;
}

.full-width[b-y7uk2bbdf9] {
    width: 100%;
}
/* /Modules/Authentication/Pages/Login.razor.rz.scp.css */
[b-sh1mu9zb1y] .login-container {
    min-height: 80vh;
    justify-content: center;
}

[b-sh1mu9zb1y] .login-card {
    padding: 2rem;
    width: 100%;
    max-width: 400px;
}

[b-sh1mu9zb1y] .form-stack {
    gap: 1rem;
}

[b-sh1mu9zb1y] .full-width {
    width: 100%;
}
/* /Modules/Authentication/Pages/ResetPassword.razor.rz.scp.css */
.reset-password-container[b-s93n4zi8e3] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.reset-password-card[b-s93n4zi8e3] {
    width: 100%;
    max-width: 420px;
    padding: 32px;
}

.form-stack[b-s93n4zi8e3] {
    gap: 16px;
}

.full-width[b-s93n4zi8e3] {
    width: 100%;
}
/* /Modules/Customers/Pages/CustomerDetail.razor.rz.scp.css */
.customer-detail-page[b-b7gkgg3gcr] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px 28px;
    font-family: var(--font-body);
    color: var(--color-text-primary);
    max-width: 960px;
}

.customer-detail-header[b-b7gkgg3gcr] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.customer-detail-breadcrumb a[b-b7gkgg3gcr] {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 13px;
}

.customer-detail-breadcrumb a:hover[b-b7gkgg3gcr] {
    color: var(--color-brand-header);
    text-decoration: underline;
}

.customer-detail-header-row[b-b7gkgg3gcr] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.customer-detail-title[b-b7gkgg3gcr] {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    margin: 0;
    color: var(--color-text-primary);
}

.customer-detail-subtitle[b-b7gkgg3gcr] {
    margin: 4px 0 0;
    color: var(--color-text-muted);
    font-size: 13px;
}

.customer-detail-actions[b-b7gkgg3gcr] {
    display: flex;
    gap: 8px;
}

.customer-detail-empty[b-b7gkgg3gcr] {
    padding: 48px 16px;
    text-align: center;
    color: var(--color-text-muted);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.customer-card[b-b7gkgg3gcr] {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.customer-card-header[b-b7gkgg3gcr] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
}

.customer-card-title[b-b7gkgg3gcr] {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.customer-card-meta[b-b7gkgg3gcr] {
    margin: 4px 0 0;
    color: var(--color-text-muted);
    font-size: 12px;
}

.customer-card-body[b-b7gkgg3gcr] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.customer-grid-2[b-b7gkgg3gcr] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 640px) {
    .customer-grid-2[b-b7gkgg3gcr] {
        grid-template-columns: 1fr;
    }
}

.customer-card-identity[b-b7gkgg3gcr] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
}

.customer-identity-avatar[b-b7gkgg3gcr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: var(--radius-pill);
    background: var(--color-brand-yellow);
    color: var(--color-brand-yellow-text);
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
}

.customer-identity-text[b-b7gkgg3gcr] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.customer-identity-name[b-b7gkgg3gcr] {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
}

.customer-identity-contact[b-b7gkgg3gcr] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--color-text-secondary);
    font-size: 13px;
}

.customer-identity-status[b-b7gkgg3gcr] {
    display: flex;
    align-items: center;
}

.status-badge[b-b7gkgg3gcr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.status-badge.status-active[b-b7gkgg3gcr] {
    background: var(--color-status-success-bg);
    color: var(--color-status-success-text);
}

.status-badge.status-archived[b-b7gkgg3gcr] {
    background: var(--color-status-warning-bg);
    color: var(--color-status-warning-text);
}

.branding-priority-hint[b-b7gkgg3gcr] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    background: var(--color-bg-surface-alt);
    border-left: 3px solid var(--color-brand-yellow);
    border-radius: var(--radius-sm);
    font-size: 13px;
}

.branding-priority-hint strong[b-b7gkgg3gcr] {
    font-family: var(--font-display);
    font-size: 12px;
}

.theme-grid[b-b7gkgg3gcr] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.theme-row[b-b7gkgg3gcr] {
    display: grid;
    grid-template-columns: 120px 40px 1fr auto;
    align-items: center;
    gap: 12px;
}

.theme-row-label[b-b7gkgg3gcr] {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
}

.theme-color-input[b-b7gkgg3gcr] {
    width: 40px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: transparent;
}

.theme-row-value[b-b7gkgg3gcr] {
    font-family: monospace;
    font-size: 12px;
}

.theme-preview[b-b7gkgg3gcr] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.theme-preview-header[b-b7gkgg3gcr] {
    background: var(--preview-header);
    color: #ffffff;
    padding: 8px 14px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
}

.theme-preview-stage[b-b7gkgg3gcr] {
    background: var(--preview-stage);
    color: #ffffff;
    padding: 28px 18px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.theme-preview-accent[b-b7gkgg3gcr] {
    background: var(--preview-accent);
    color: #1a1a1a;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
}

.theme-preview-warn[b-b7gkgg3gcr] {
    background: var(--preview-warn);
    color: #ffffff;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
}

.theme-preview-caption[b-b7gkgg3gcr] {
    background: var(--preview-soft);
    padding: 8px 14px;
    font-size: 11px;
}

.account-state-row[b-b7gkgg3gcr] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.account-badge[b-b7gkgg3gcr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
}

.status-dot[b-b7gkgg3gcr] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.account-badge.account-linked[b-b7gkgg3gcr] {
    background: var(--color-status-success-bg);
    color: var(--color-status-success-text);
}

.account-badge.account-pending[b-b7gkgg3gcr] {
    background: var(--color-status-warning-bg);
    color: var(--color-status-warning-text);
}

.account-actions[b-b7gkgg3gcr] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.danger-row[b-b7gkgg3gcr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
}

.danger-row:last-child[b-b7gkgg3gcr] {
    border-bottom: none;
}

.danger-row strong[b-b7gkgg3gcr] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
}

.danger-row p[b-b7gkgg3gcr] {
    margin: 4px 0 0;
}

[b-b7gkgg3gcr] .danger-button {
    background: var(--color-status-danger-bg);
    color: var(--color-status-danger-text);
}

.muted[b-b7gkgg3gcr] {
    color: var(--color-text-muted);
    font-size: 12px;
}

.muted.small[b-b7gkgg3gcr] {
    font-size: 11px;
}

.customer-projects-list[b-b7gkgg3gcr] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.customer-projects-row[b-b7gkgg3gcr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface-alt);
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}

.customer-projects-row:hover[b-b7gkgg3gcr] {
    border-color: var(--color-brand-header);
    background: var(--color-bg-hover);
}

.customer-projects-name[b-b7gkgg3gcr] {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: 13px;
}
/* /Modules/Customers/Pages/Customers.razor.rz.scp.css */
.customers-page[b-5obannlddb] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px 28px;
    font-family: var(--font-body);
    color: var(--color-text-primary);
}

.customers-header[b-5obannlddb] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.customers-title[b-5obannlddb] {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    margin: 0;
    color: var(--color-text-primary);
}

.customers-summary[b-5obannlddb] {
    margin: 4px 0 0;
    color: var(--color-text-muted);
    font-size: 13px;
}

.customers-actionbar[b-5obannlddb] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.customers-search[b-5obannlddb] {
    flex: 1 1 240px;
    min-width: 200px;
}

.customers-filter[b-5obannlddb] {
    min-width: 160px;
}

.customers-table[b-5obannlddb] {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.customers-empty[b-5obannlddb] {
    padding: 48px 16px;
    text-align: center;
    color: var(--color-text-muted);
}

.customers-grid[b-5obannlddb] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.customers-grid thead th[b-5obannlddb] {
    text-align: left;
    padding: 12px 16px;
    background: var(--color-bg-surface-alt);
    color: var(--color-text-secondary);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--color-border);
}

.customers-grid tbody td[b-5obannlddb] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.customers-grid tbody tr:last-child td[b-5obannlddb] {
    border-bottom: none;
}

.customers-grid tbody tr.archived td[b-5obannlddb] {
    opacity: 0.6;
}

.customers-col-actions[b-5obannlddb] {
    text-align: right;
    white-space: nowrap;
}

.customer-cell[b-5obannlddb] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.customer-cell-avatar[b-5obannlddb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Fixed on all three axes: in the stacked card layout the long customer name would
       otherwise squeeze the circle into a sliver. */
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-pill);
    background: var(--color-brand-yellow);
    color: var(--color-brand-yellow-text);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
}

.customer-cell-info[b-5obannlddb] {
    display: flex;
    flex-direction: column;
}

.customer-cell-name[b-5obannlddb] {
    font-weight: 600;
    color: var(--color-text-primary);
}

.customer-cell-contact[b-5obannlddb] {
    font-size: 12px;
    color: var(--color-text-secondary);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.account-badge[b-5obannlddb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
}

.status-dot[b-5obannlddb] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.account-badge.account-linked[b-5obannlddb] {
    background: var(--color-status-success-bg);
    color: var(--color-status-success-text);
}

.account-badge.account-pending[b-5obannlddb] {
    background: var(--color-status-warning-bg);
    color: var(--color-status-warning-text);
}

.theme-swatches[b-5obannlddb] {
    display: inline-flex;
    gap: 4px;
}

.theme-swatch[b-5obannlddb] {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid var(--color-border);
    display: inline-block;
}

.theme-swatch.fallback[b-5obannlddb] {
    border-style: dashed;
}

.theme-swatch-header[b-5obannlddb] {
    background: var(--swatch-color, var(--color-brand-header));
}

.theme-swatch-stage[b-5obannlddb] {
    background: var(--swatch-color, var(--color-brand-stage));
}

.theme-swatch-soft[b-5obannlddb] {
    background: var(--swatch-color, var(--color-brand-soft));
}

.theme-swatch-accent[b-5obannlddb] {
    background: var(--swatch-color, var(--color-brand-yellow));
}

.theme-swatch-warn[b-5obannlddb] {
    background: var(--swatch-color, var(--color-brand-red));
}

.muted[b-5obannlddb] {
    color: var(--color-text-muted);
    font-size: 12px;
}

.muted.small[b-5obannlddb] {
    font-size: 11px;
}

.dialog-form[b-5obannlddb] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
    min-width: 360px;
}

.dialog-section-label[b-5obannlddb] {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin-top: 6px;
}
/* /Modules/Dashboard/Components/AwaitingFeedbackCard.razor.rz.scp.css */
.afc-card[b-ujxr96akni] {
    display: flex;
    flex-direction: column;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.afc-card:hover[b-ujxr96akni] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-elevated);
}

@media (prefers-reduced-motion: reduce) {
    .afc-card[b-ujxr96akni] {
        transition: none;
    }

    .afc-card:hover[b-ujxr96akni] {
        transform: none;
    }
}

.afc-link[b-ujxr96akni] {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.afc-link:focus-visible[b-ujxr96akni] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: -2px;
}

.afc-thumb-frame[b-ujxr96akni] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

[b-ujxr96akni] .video-card-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.afc-body[b-ujxr96akni] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 12px 12px;
}

.afc-title[b-ujxr96akni] {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.afc-subline[b-ujxr96akni] {
    font-size: 12px;
    color: var(--color-text-muted);
}

.afc-footer[b-ujxr96akni] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0 12px 12px;
}

.afc-approve-group[b-ujxr96akni] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

[b-ujxr96akni] .afc-approve {
    --accent-fill-rest: var(--color-brand-header);
    --accent-fill-hover: var(--color-brand-header-hover);
    --accent-fill-active: var(--color-brand-header-hover);
    --accent-foreground-rest: var(--color-text-on-brand);
    --accent-foreground-hover: var(--color-text-on-brand);
    --accent-foreground-active: var(--color-text-on-brand);
    min-height: 44px;
}

[b-ujxr96akni] .afc-cancel {
    min-height: 44px;
}

@media (max-width: 640px) {
    .afc-footer[b-ujxr96akni] {
        flex-direction: column;
        align-items: stretch;
    }

    .afc-approve-group[b-ujxr96akni] {
        flex-direction: column;
        align-items: stretch;
    }

    [b-ujxr96akni] .afc-approve {
        width: 100%;
    }

    [b-ujxr96akni] .afc-cancel {
        width: 100%;
    }
}
/* /Modules/Dashboard/Components/DashboardKpiCard.razor.rz.scp.css */
.dashboard-kpi-card[b-80we8nsurx] {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.dashboard-kpi-card:hover[b-80we8nsurx] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-elevated);
}

.dashboard-kpi-card:focus-visible[b-80we8nsurx] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-kpi-card[b-80we8nsurx] {
        transition: none;
    }

    .dashboard-kpi-card:hover[b-80we8nsurx] {
        transform: none;
    }
}

.dashboard-kpi-card-rail[b-80we8nsurx] {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--dashboard-kpi-rail-color);
}

.dashboard-kpi-card--progress[b-80we8nsurx] {
    --dashboard-kpi-rail-color: var(--color-border-strong);
    --dashboard-kpi-count-color: var(--color-text-primary);
}

.dashboard-kpi-card--feedback[b-80we8nsurx] {
    --dashboard-kpi-rail-color: var(--color-brand-yellow);
    --dashboard-kpi-count-color: var(--color-status-warning-text);
}

.dashboard-kpi-card--ready[b-80we8nsurx] {
    --dashboard-kpi-rail-color: var(--color-brand-header);
    --dashboard-kpi-count-color: var(--color-status-success-text);
}

.dashboard-kpi-card-body[b-80we8nsurx] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: var(--space-2);
}

.dashboard-kpi-card-label[b-80we8nsurx] {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.dashboard-kpi-card-count[b-80we8nsurx] {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--dashboard-kpi-count-color);
}

@media (pointer: coarse) {
    .dashboard-kpi-card[b-80we8nsurx] {
        min-height: 44px;
    }
}
/* /Modules/Dashboard/Components/OpenCommentRow.razor.rz.scp.css */
.open-comment-row[b-ryk5gkt2hc] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-md);
    transition: background-color 150ms ease;
}

.open-comment-row:hover[b-ryk5gkt2hc] {
    background: var(--color-bg-hover);
}

.open-comment-row:focus-visible[b-ryk5gkt2hc] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
    .open-comment-row[b-ryk5gkt2hc] {
        transition: none;
    }
}

.open-comment-row-timestamp[b-ryk5gkt2hc] {
    flex-shrink: 0;
    min-width: 44px;
    padding-top: 2px;
    font-family: var(--font-monospace);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-secondary);
}

.open-comment-row-body[b-ryk5gkt2hc] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.open-comment-row-text[b-ryk5gkt2hc] {
    font-size: 14px;
    color: var(--color-text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.open-comment-row-subline[b-ryk5gkt2hc] {
    font-size: 12px;
    color: var(--color-text-muted);
}

.open-comment-row-arrow[b-ryk5gkt2hc] {
    flex-shrink: 0;
    align-self: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-muted);
    white-space: nowrap;
}

@media (pointer: coarse) {
    .open-comment-row[b-ryk5gkt2hc] {
        min-height: 44px;
    }
}
/* /Modules/Dashboard/Components/RecentProjectCard.razor.rz.scp.css */
.recent-project-card[b-9ftm2j3q6b] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    text-decoration: none;
    color: inherit;
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.recent-project-card:hover[b-9ftm2j3q6b] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-elevated);
}

.recent-project-card:focus-visible[b-9ftm2j3q6b] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
    .recent-project-card[b-9ftm2j3q6b] {
        transition: none;
    }

    .recent-project-card:hover[b-9ftm2j3q6b] {
        transform: none;
    }
}

.recent-project-card-header[b-9ftm2j3q6b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.recent-project-card-name[b-9ftm2j3q6b] {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.recent-project-card-badge[b-9ftm2j3q6b] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    background: var(--color-status-warning-bg);
    color: var(--color-status-warning-text);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.recent-project-card-badge-dot[b-9ftm2j3q6b] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.recent-project-card-subline[b-9ftm2j3q6b] {
    font-size: 13px;
    color: var(--color-text-muted);
}

.recent-project-card-bar[b-9ftm2j3q6b] {
    display: flex;
    width: 100%;
    height: 6px;
    border-radius: var(--radius-pill);
    overflow: hidden;
    background: var(--color-bg-surface-alt);
}

.recent-project-card-segment[b-9ftm2j3q6b] {
    height: 100%;
}

.recent-project-card-segment--progress[b-9ftm2j3q6b] {
    width: var(--seg-progress, 0%);
    background: var(--color-border-strong);
}

.recent-project-card-segment--feedback[b-9ftm2j3q6b] {
    width: var(--seg-feedback, 0%);
    background: var(--color-brand-yellow);
}

.recent-project-card-segment--ready[b-9ftm2j3q6b] {
    width: var(--seg-ready, 0%);
    background: var(--color-brand-header);
}

@media (pointer: coarse) {
    .recent-project-card[b-9ftm2j3q6b] {
        min-height: 44px;
    }
}
/* /Modules/Dashboard/Components/RecentUploadCard.razor.rz.scp.css */
.recent-upload-card[b-y3a7d7f6x8] {
    display: flex;
    flex-direction: column;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.recent-upload-card:hover[b-y3a7d7f6x8] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-elevated);
}

.recent-upload-card:focus-visible[b-y3a7d7f6x8] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
    .recent-upload-card[b-y3a7d7f6x8] {
        transition: none;
    }

    .recent-upload-card:hover[b-y3a7d7f6x8] {
        transform: none;
    }
}

.recent-upload-card-thumb-frame[b-y3a7d7f6x8] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

[b-y3a7d7f6x8] .video-card-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.recent-upload-card-body[b-y3a7d7f6x8] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 12px 12px;
}

.recent-upload-card-title[b-y3a7d7f6x8] {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.recent-upload-card-subline[b-y3a7d7f6x8] {
    font-size: 12px;
    color: var(--color-text-muted);
}
/* /Modules/Dashboard/Pages/CustomerDashboard.razor.rz.scp.css */
.custdash[b-dhwgqmkkec] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: 24px 28px;
    font-family: var(--font-body);
    color: var(--color-text-primary);
}

.custdash-header[b-dhwgqmkkec] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.custdash-greeting[b-dhwgqmkkec] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.custdash-title[b-dhwgqmkkec] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    color: var(--color-text-primary);
}

.custdash-subtitle[b-dhwgqmkkec] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 13px;
}

.custdash-row[b-dhwgqmkkec] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
}

.custdash-panel[b-dhwgqmkkec] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    min-width: 0;
}

.custdash-panel-header[b-dhwgqmkkec] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.custdash-panel-header h2[b-dhwgqmkkec] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.custdash-awaiting-grid[b-dhwgqmkkec] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-3);
}

.custdash-project-list[b-dhwgqmkkec],
.custdash-comment-list[b-dhwgqmkkec] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.custdash-empty[b-dhwgqmkkec] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 32px 16px;
    text-align: center;
    color: var(--color-text-muted);
}

.custdash-empty p[b-dhwgqmkkec] {
    margin: 0;
}

.custdash-alert[b-dhwgqmkkec] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: flex-start;
}

[b-dhwgqmkkec] .primary-action {
    --accent-fill-rest: var(--color-brand-header);
    --accent-fill-hover: var(--color-brand-header-hover);
    --accent-fill-active: var(--color-brand-header-hover);
    --accent-foreground-rest: var(--color-text-on-brand);
    --accent-foreground-hover: var(--color-text-on-brand);
    --accent-foreground-active: var(--color-text-on-brand);
    min-height: 44px;
}

.custdash-loading[b-dhwgqmkkec] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.custdash-visually-hidden[b-dhwgqmkkec] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.custdash-skeleton-header[b-dhwgqmkkec] {
    height: 56px;
    border-radius: var(--radius-lg);
    background: linear-gradient(90deg, var(--color-bg-surface-alt) 25%, var(--color-bg-hover) 50%, var(--color-bg-surface-alt) 75%);
    background-size: 200% 100%;
    animation: custdash-skeleton-shimmer-b-dhwgqmkkec 1.4s ease infinite;
}

.custdash-skeleton-hero[b-dhwgqmkkec] {
    height: 220px;
    border-radius: var(--radius-lg);
    background: linear-gradient(90deg, var(--color-bg-surface-alt) 25%, var(--color-bg-hover) 50%, var(--color-bg-surface-alt) 75%);
    background-size: 200% 100%;
    animation: custdash-skeleton-shimmer-b-dhwgqmkkec 1.4s ease infinite;
}

.custdash-skeleton-panels[b-dhwgqmkkec] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-4);
}

.custdash-skeleton-block[b-dhwgqmkkec] {
    height: 88px;
    border-radius: var(--radius-lg);
    background: linear-gradient(90deg, var(--color-bg-surface-alt) 25%, var(--color-bg-hover) 50%, var(--color-bg-surface-alt) 75%);
    background-size: 200% 100%;
    animation: custdash-skeleton-shimmer-b-dhwgqmkkec 1.4s ease infinite;
}

.custdash-skeleton-block--tall[b-dhwgqmkkec] {
    height: 220px;
}

@keyframes custdash-skeleton-shimmer-b-dhwgqmkkec {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .custdash-skeleton-header[b-dhwgqmkkec],
    .custdash-skeleton-hero[b-dhwgqmkkec],
    .custdash-skeleton-block[b-dhwgqmkkec] {
        animation: none;
    }
}

@media (max-width: 1023px) {
    .custdash-row[b-dhwgqmkkec] {
        grid-template-columns: 1fr;
    }

    .custdash-skeleton-panels[b-dhwgqmkkec] {
        grid-template-columns: 1fr;
    }

    .custdash-awaiting-grid[b-dhwgqmkkec] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .custdash[b-dhwgqmkkec] {
        padding: 16px;
        gap: var(--space-3);
    }

    .custdash-header[b-dhwgqmkkec] {
        flex-direction: column;
        align-items: stretch;
    }

    .custdash-awaiting-grid[b-dhwgqmkkec] {
        grid-template-columns: 1fr;
    }
}
/* /Modules/Dashboard/Pages/ServiceProviderDashboard.razor.rz.scp.css */
.spdash[b-uzi09ng482] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: 24px 28px;
    font-family: var(--font-body);
    color: var(--color-text-primary);
}

.spdash-header[b-uzi09ng482] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.spdash-greeting[b-uzi09ng482] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.spdash-title[b-uzi09ng482] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    color: var(--color-text-primary);
}

.spdash-subtitle[b-uzi09ng482] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 13px;
}

.spdash-header-actions[b-uzi09ng482] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.spdash-drive-chip[b-uzi09ng482] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.spdash-drive-chip-link[b-uzi09ng482] {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
    white-space: nowrap;
}

.spdash-drive-chip-link:hover[b-uzi09ng482] {
    text-decoration: underline;
}

.spdash-drive-chip-link:focus-visible[b-uzi09ng482] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: -2px;
}

.spdash-actions[b-uzi09ng482] {
    display: flex;
    gap: var(--space-2);
}

[b-uzi09ng482] .primary-action {
    --accent-fill-rest: var(--color-brand-header);
    --accent-fill-hover: var(--color-brand-header-hover);
    --accent-fill-active: var(--color-brand-header-hover);
}

.spdash-kpis[b-uzi09ng482] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}

.spdash-row[b-uzi09ng482] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
}

.spdash-panel[b-uzi09ng482] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    min-width: 0;
}

.spdash-panel-header[b-uzi09ng482] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.spdash-panel-header h2[b-uzi09ng482] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.spdash-panel-link[b-uzi09ng482] {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
    white-space: nowrap;
}

.spdash-panel-link:hover[b-uzi09ng482] {
    text-decoration: underline;
}

.spdash-project-list[b-uzi09ng482],
.spdash-comment-list[b-uzi09ng482] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.spdash-uploads-grid[b-uzi09ng482] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-3);
}

.spdash-empty[b-uzi09ng482] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 32px 16px;
    text-align: center;
    color: var(--color-text-muted);
}

.spdash-empty p[b-uzi09ng482] {
    margin: 0;
}

.spdash-empty-link[b-uzi09ng482] {
    color: var(--color-accent);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}

.spdash-empty-link:hover[b-uzi09ng482] {
    text-decoration: underline;
}

.spdash-alert[b-uzi09ng482] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: flex-start;
}

.spdash-loading[b-uzi09ng482] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.spdash-visually-hidden[b-uzi09ng482] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.spdash-skeleton-header[b-uzi09ng482] {
    height: 56px;
    border-radius: var(--radius-lg);
    background: linear-gradient(90deg, var(--color-bg-surface-alt) 25%, var(--color-bg-hover) 50%, var(--color-bg-surface-alt) 75%);
    background-size: 200% 100%;
    animation: spdash-skeleton-shimmer-b-uzi09ng482 1.4s ease infinite;
}

.spdash-skeleton-kpis[b-uzi09ng482] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}

.spdash-skeleton-panels[b-uzi09ng482] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-4);
}

.spdash-skeleton-block[b-uzi09ng482] {
    height: 88px;
    border-radius: var(--radius-lg);
    background: linear-gradient(90deg, var(--color-bg-surface-alt) 25%, var(--color-bg-hover) 50%, var(--color-bg-surface-alt) 75%);
    background-size: 200% 100%;
    animation: spdash-skeleton-shimmer-b-uzi09ng482 1.4s ease infinite;
}

.spdash-skeleton-block--tall[b-uzi09ng482] {
    height: 220px;
}

@keyframes spdash-skeleton-shimmer-b-uzi09ng482 {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .spdash-skeleton-header[b-uzi09ng482],
    .spdash-skeleton-block[b-uzi09ng482] {
        animation: none;
    }
}

@media (max-width: 1023px) {
    .spdash-row[b-uzi09ng482] {
        grid-template-columns: 1fr;
    }

    .spdash-skeleton-panels[b-uzi09ng482] {
        grid-template-columns: 1fr;
    }

    .spdash-uploads-grid[b-uzi09ng482] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .spdash[b-uzi09ng482] {
        padding: 16px;
        gap: var(--space-3);
    }

    .spdash-header[b-uzi09ng482] {
        flex-direction: column;
        align-items: stretch;
    }

    .spdash-header-actions[b-uzi09ng482] {
        flex-direction: column;
        align-items: stretch;
    }

    .spdash-drive-chip[b-uzi09ng482] {
        width: 100%;
    }

    .spdash-drive-chip-link[b-uzi09ng482] {
        min-height: 44px;
    }

    .spdash-actions[b-uzi09ng482] {
        flex-direction: column;
    }

    [b-uzi09ng482] .primary-action {
        order: -1;
    }

    .spdash-uploads-grid[b-uzi09ng482] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* /Modules/Dashboard/Pages/VideoStatusOverviewPage.razor.rz.scp.css */
.video-status-overview[b-2b1593z24i] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: 24px 28px;
    font-family: var(--font-body);
    color: var(--color-text-primary);
}

.video-status-overview-header[b-2b1593z24i] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.video-status-overview-title[b-2b1593z24i] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    color: var(--color-text-primary);
}

.video-status-overview-switcher[b-2b1593z24i] {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    width: fit-content;
    background: var(--color-bg-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
}

.video-status-overview-switch-option[b-2b1593z24i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    border: none;
    background: transparent;
    padding: 8px 16px;
    min-height: 36px;
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}

.video-status-overview-switch-option:hover[b-2b1593z24i] {
    color: var(--color-text-primary);
}

.video-status-overview-switch-option:focus-visible[b-2b1593z24i] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: -2px;
}

.video-status-overview-switch-option--active[b-2b1593z24i] {
    background: var(--color-bg-elevated);
    color: var(--color-accent);
    box-shadow: var(--shadow-card);
}

@media (prefers-reduced-motion: reduce) {
    .video-status-overview-switch-option[b-2b1593z24i] {
        transition: none;
    }
}

[b-2b1593z24i] .primary-action {
    --accent-fill-rest: var(--color-brand-header);
    --accent-fill-hover: var(--color-brand-header-hover);
    --accent-fill-active: var(--color-brand-header-hover);
}

.video-status-overview-alert[b-2b1593z24i] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: flex-start;
}

.video-status-overview-loading[b-2b1593z24i] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.video-status-overview-visually-hidden[b-2b1593z24i] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.video-status-overview-skeleton-block[b-2b1593z24i] {
    height: 64px;
    border-radius: var(--radius-md);
    background: linear-gradient(90deg, var(--color-bg-surface-alt) 25%, var(--color-bg-hover) 50%, var(--color-bg-surface-alt) 75%);
    background-size: 200% 100%;
    animation: video-status-overview-skeleton-shimmer-b-2b1593z24i 1.4s ease infinite;
}

@keyframes video-status-overview-skeleton-shimmer-b-2b1593z24i {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .video-status-overview-skeleton-block[b-2b1593z24i] {
        animation: none;
    }
}

.video-status-overview-empty[b-2b1593z24i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 64px 16px;
    text-align: center;
    color: var(--color-text-muted);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.video-status-overview-empty p[b-2b1593z24i] {
    margin: 0;
}

.video-status-overview-grid[b-2b1593z24i] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-3);
}

.video-status-overview-truncation-note[b-2b1593z24i] {
    margin: 0;
    font-size: 12px;
    color: var(--color-text-secondary);
}

.video-status-overview-card[b-2b1593z24i] {
    display: flex;
    flex-direction: column;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.video-status-overview-card:hover[b-2b1593z24i] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-elevated);
}

.video-status-overview-card:focus-visible[b-2b1593z24i] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
    .video-status-overview-card[b-2b1593z24i] {
        transition: none;
    }

    .video-status-overview-card:hover[b-2b1593z24i] {
        transform: none;
    }
}

.video-status-overview-card-thumb-frame[b-2b1593z24i] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

[b-2b1593z24i] .video-card-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.video-status-overview-card-body[b-2b1593z24i] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 12px 12px;
}

.video-status-overview-card-title[b-2b1593z24i] {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.video-status-overview-card-subline[b-2b1593z24i] {
    font-size: 12px;
    color: var(--color-text-muted);
}

@media (pointer: coarse) {
    .video-status-overview-switch-option[b-2b1593z24i] {
        min-height: 44px;
    }

    .video-status-overview-card[b-2b1593z24i] {
        min-height: 44px;
    }
}

@media (min-width: 641px) and (max-width: 1023px) {
    .video-status-overview-grid[b-2b1593z24i] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .video-status-overview[b-2b1593z24i] {
        padding: 16px;
    }

    .video-status-overview-switcher[b-2b1593z24i] {
        width: 100%;
    }

    .video-status-overview-switch-option[b-2b1593z24i] {
        flex: 1 1 0;
        text-align: center;
    }

    .video-status-overview-grid[b-2b1593z24i] {
        grid-template-columns: 1fr;
    }
}
/* /Modules/Home/Components/PreviewNotice.razor.rz.scp.css */
/*
  Sits above everything, including the rail and the masthead, on the nav-sheet layer — this is the
  one thing on the page that must not be reachable around.
*/
.preview-notice[b-1fj1m8tyzp] {
    position: fixed;
    inset: 0;
    z-index: var(--layer-nav-sheet);
    display: grid;
    place-items: center;
    padding: var(--space-4);
    background: color-mix(in srgb, var(--home-deep-3) 84%, transparent);
    backdrop-filter: blur(6px);
}

.preview-notice-panel[b-1fj1m8tyzp] {
    width: min(560px, 100%);
    max-height: calc(100vh - 2 * var(--space-4));
    overflow-y: auto;
    background: var(--color-bg-elevated);
    border-radius: var(--radius-lg);
    border-top: 5px solid var(--color-brand-yellow);
    padding: clamp(24px, 4vw, 40px);
    box-shadow: var(--shadow-elevated);
    animation: preview-notice-in-b-1fj1m8tyzp .45s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes preview-notice-in-b-1fj1m8tyzp {
    from { transform: translateY(16px) scale(.98); opacity: 0; }
    to { transform: none; opacity: 1; }
}

.preview-notice-eyebrow[b-1fj1m8tyzp] {
    margin: 0 0 var(--space-2);
    font-family: var(--font-monospace);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--color-brand-header);
}

.preview-notice-title[b-1fj1m8tyzp] {
    margin: 0 0 var(--space-3);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.5rem, 3.4vw, 2rem);
    letter-spacing: -0.03em;
    line-height: 1.14;
    color: var(--color-text-primary);
}

.preview-notice-body[b-1fj1m8tyzp] {
    color: var(--color-text-secondary);
    font-size: .95rem;
}

/* Fluent's reboot puts font-family and line-height straight on p, and a direct rule beats
   inheritance — without restating them here the notice is set in Fluent's face and ramp. */
.preview-notice-body p[b-1fj1m8tyzp] {
    margin: 0 0 var(--space-3);
    font-family: var(--font-body);
    line-height: 1.6;
}

.preview-notice-list li[b-1fj1m8tyzp] { line-height: 1.6; }

.preview-notice-list[b-1fj1m8tyzp] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-2);
}

.preview-notice-list li[b-1fj1m8tyzp] {
    position: relative;
    padding-left: 22px;
}

.preview-notice-list li[b-1fj1m8tyzp]::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-sm);
    background: var(--color-brand-yellow);
}

.preview-notice-accept[b-1fj1m8tyzp] {
    margin-top: var(--space-4);
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: var(--radius-md);
    padding: 15px 20px;
    background: var(--color-brand-header);
    color: var(--color-text-on-brand);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: background .18s ease;
}

.preview-notice-accept:hover[b-1fj1m8tyzp] { background: var(--color-brand-header-hover); }

.preview-notice-accept:focus-visible[b-1fj1m8tyzp] {
    outline: 3px solid var(--color-brand-yellow);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .preview-notice-panel[b-1fj1m8tyzp] { animation: none; }
    .preview-notice-accept[b-1fj1m8tyzp] { transition: none; }
}
/* /Modules/Home/Components/ProductPreview.razor.rz.scp.css */
/*
  Chrome for the stylised product views. The window bar and the card rules are close cousins of the
  ones in ReviewDemo; they are written out in both rather than shared, because CSS isolation scopes
  a stylesheet to its own component and the alternative — a global stylesheet for two components on
  one page — costs more than the twenty lines it saves.
*/
.product-preview[b-f3immlixby] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
    font-size: 13px;
    line-height: 1.4;
    box-shadow: 0 20px 44px rgba(0, 0, 0, .16);
}

.preview-bar[b-f3immlixby] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 10px 14px;
    background: var(--color-brand-header);
    color: var(--color-text-on-brand);
}

.preview-dots[b-f3immlixby] {
    display: flex;
    gap: 5px;
    flex: none;
}

.preview-dots i[b-f3immlixby] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-on-stage-tint);
}

.preview-title[b-f3immlixby] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preview-chip[b-f3immlixby] {
    margin-left: auto;
    flex: none;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.preview-chip--onbar[b-f3immlixby] {
    background: var(--color-on-stage-tint);
    color: var(--color-text-on-brand);
}

.preview-chip--ready[b-f3immlixby] {
    background: var(--color-status-success-bg);
    color: var(--color-status-success-text);
}

.preview-pane[b-f3immlixby] {
    padding: 14px;
    background: var(--color-bg-surface-alt);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.preview-card[b-f3immlixby] {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.preview-card.preview-row[b-f3immlixby] { flex-direction: row; align-items: center; }

.preview-row[b-f3immlixby] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 11px;
}

.preview-grow[b-f3immlixby] { flex: 1; min-width: 0; }

.preview-label[b-f3immlixby] {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--color-text-muted);
    font-weight: 700;
}

.preview-field[b-f3immlixby] {
    padding: 7px 9px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface-alt);
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.preview-field code[b-f3immlixby] {
    font-family: var(--font-monospace);
    font-size: 10px;
    color: var(--color-brand-header);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preview-button[b-f3immlixby] {
    align-self: flex-start;
    background: var(--color-brand-header);
    color: var(--color-text-on-brand);
    border-radius: var(--radius-md);
    padding: 7px 12px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11px;
}

.preview-progress[b-f3immlixby] {
    display: block;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--color-border);
    overflow: hidden;
}

.preview-progress i[b-f3immlixby] {
    display: block;
    height: 100%;
    width: 72%;
    background: var(--color-brand-header);
    border-radius: var(--radius-pill);
}

/* A golden-hour still: sun, haze and a silhouette, enough of a picture to read as a video. */
.preview-thumb[b-f3immlixby] {
    width: 44px;
    height: 26px;
    border-radius: var(--radius-sm);
    flex: none;
    background:
        radial-gradient(60% 70% at 70% 30%, rgba(255, 226, 170, .9), transparent 70%),
        linear-gradient(170deg, #4a6b74, #b5875a 70%, #3c2f27);
}

.preview-check[b-f3immlixby] {
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    flex: none;
    position: relative;
}

.preview-check--done[b-f3immlixby] {
    background: var(--color-brand-header);
    border-color: var(--color-brand-header);
}

.preview-check--done[b-f3immlixby]::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 3px;
    height: 7px;
    border: solid var(--color-text-on-brand);
    border-width: 0 1.6px 1.6px 0;
    transform: rotate(45deg);
}

.preview-time[b-f3immlixby] {
    font-family: var(--font-monospace);
    font-size: 10px;
    font-weight: 700;
    color: var(--color-brand-header);
    background: var(--color-status-success-bg);
    border-radius: var(--radius-sm);
    padding: 2px 4px;
    margin-right: 5px;
}

.preview-text[b-f3immlixby] { color: var(--color-text-muted); font-size: 11px; }

.preview-card.is-done .preview-text[b-f3immlixby] {
    text-decoration: line-through;
    opacity: .55;
}
/* /Modules/Home/Components/ProgressRail.razor.rz.scp.css */
/*
  The rail sits over whichever section is behind it, and those alternate between light and deep
  grounds, so it takes its colour from currentColor and the script flips one class. That is why
  every rule below uses currentColor rather than a palette entry: one colour decision, two grounds.

  It disappears below 1180px, where the margin it lives in no longer exists.
*/
.home-rail[b-hs6a5i5xvg] {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 132px;
    z-index: var(--layer-bottom-nav);
    display: none;
    padding: 22px 0 22px 26px;
    pointer-events: none;
}

/*
  Two levels of the same decision: the rail as a whole takes the colour of whatever sits behind its
  middle, which is what the track and the head follow; each mark then overrides it with the colour
  of the ground behind that mark. Without the per-mark override, a section boundary crossing the
  viewport leaves half the labels white on the light ground.
*/
.home-rail.on-deep[b-hs6a5i5xvg] { color: var(--color-text-on-brand); }
.home-rail.on-light[b-hs6a5i5xvg] { color: var(--color-text-primary); }

.home-rail-mark.on-deep[b-hs6a5i5xvg] { color: var(--color-text-on-brand); }
.home-rail-mark.on-light[b-hs6a5i5xvg] { color: var(--color-text-primary); }

@media (min-width: 1180px) {
    .home-rail[b-hs6a5i5xvg] { display: block; }
}

.home-rail-track[b-hs6a5i5xvg] {
    position: absolute;
    left: 32px;
    top: 12%;
    bottom: 12%;
    width: 3px;
    border-radius: var(--radius-pill);
    background: currentColor;
    opacity: .2;
}

/* Height is written by the script from the scroll position. */
.home-rail-played[b-hs6a5i5xvg] {
    position: absolute;
    left: 32px;
    top: 12%;
    width: 3px;
    height: 0;
    border-radius: var(--radius-pill);
    background: var(--color-brand-yellow);
    box-shadow: 0 0 12px color-mix(in srgb, var(--color-brand-yellow) 35%, transparent);
}

/* The ring is currentColor, so the head reads as a scrubber knob on both grounds. */
.home-rail-head[b-hs6a5i5xvg] {
    position: absolute;
    left: 33.5px;
    top: 12%;
    width: 15px;
    height: 15px;
    margin: -7.5px 0 0 -7.5px;
    border-radius: 50%;
    background: var(--color-brand-yellow);
    box-shadow: 0 0 0 2.5px currentColor, 0 2px 10px rgba(0, 0, 0, .35);
}

.home-rail-marks[b-hs6a5i5xvg] {
    position: absolute;
    left: 26px;
    top: 12%;
    bottom: 12%;
    width: 96px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: auto;
}

.home-rail-mark[b-hs6a5i5xvg] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-monospace);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: currentColor;
    text-decoration: none;
    opacity: .5;
    transition: opacity .25s ease;
}

.home-rail-mark[b-hs6a5i5xvg]::before {
    content: "";
    width: 16px;
    height: 2px;
    background: currentColor;
    flex: none;
}

.home-rail-mark.is-active[b-hs6a5i5xvg] { opacity: 1; }

.home-rail-mark.is-active[b-hs6a5i5xvg]::before {
    width: 26px;
    height: 3px;
    background: var(--color-brand-yellow);
}

@media (hover: hover) {
    .home-rail-mark:hover[b-hs6a5i5xvg] { opacity: 1; }
}

@media (pointer: coarse) {
    .home-rail-mark:active[b-hs6a5i5xvg] { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .home-rail-mark[b-hs6a5i5xvg] { transition: none; }
}
/* /Modules/Home/Components/ReviewDemo.razor.rz.scp.css */
/*
  The review window in the hero. Its chrome deliberately mirrors ProductPreview's — same bar, same
  comment rows — but this one is larger, carries the picture and animates, so it owns its own
  stylesheet rather than sharing one across component scopes.
*/
.review-demo[b-n5n8syt12j] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
    font-size: 13px;
    line-height: 1.4;
    box-shadow: var(--shadow-video);
}

.demo-bar[b-n5n8syt12j] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 10px 14px;
    background: var(--color-brand-header);
    color: var(--color-text-on-brand);
}

.demo-dots[b-n5n8syt12j] { display: flex; gap: 5px; flex: none; }

.demo-dots i[b-n5n8syt12j] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-on-stage-tint);
}

.demo-title[b-n5n8syt12j] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.demo-crumb[b-n5n8syt12j] { color: var(--color-on-stage-hint); font-weight: 500; }

.demo-chip[b-n5n8syt12j] {
    margin-left: auto;
    flex: none;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    transition: background .3s ease, color .3s ease;
}

.demo-chip--neutral[b-n5n8syt12j] {
    background: var(--color-on-stage-tint);
    color: var(--color-text-on-brand);
}

.demo-chip--review[b-n5n8syt12j] {
    background: var(--color-status-warning-bg);
    color: var(--color-status-warning-text);
}

.demo-body[b-n5n8syt12j] {
    display: grid;
    grid-template-columns: 1fr 232px;
    min-height: 0;
}

.demo-main[b-n5n8syt12j] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    background: var(--color-brand-stage);
}

/* Golden-hour still: sun, haze, two bokeh highlights and a silhouette against the light. */
.demo-frame[b-n5n8syt12j] {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md);
    overflow: hidden;
    background:
        radial-gradient(38% 55% at 68% 34%, rgba(255, 236, 190, .95) 0%, rgba(255, 196, 120, .55) 38%, transparent 70%),
        radial-gradient(90% 70% at 50% 100%, rgba(20, 38, 34, .95) 0%, transparent 68%),
        linear-gradient(178deg, #4a6b74 0%, #8a8a72 42%, #b5875a 72%, #3c2f27 100%);
}

.demo-frame[b-n5n8syt12j]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 22% 62%, rgba(255, 224, 170, .5) 0 6px, transparent 7px),
        radial-gradient(circle at 31% 72%, rgba(255, 224, 170, .34) 0 9px, transparent 10px),
        radial-gradient(circle at 84% 66%, rgba(255, 210, 150, .3) 0 12px, transparent 13px);
    filter: blur(1px);
}

.demo-frame[b-n5n8syt12j]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 26%;
    height: 58%;
    transform: translateX(-50%);
    background:
        radial-gradient(48% 32% at 30% 12%, #1d211c 0 60%, transparent 61%),
        radial-gradient(48% 32% at 72% 16%, #1d211c 0 60%, transparent 61%),
        linear-gradient(180deg, transparent 16%, #1d211c 30%);
    clip-path: polygon(12% 100%, 22% 26%, 44% 8%, 58% 8%, 80% 26%, 90% 100%);
    opacity: .92;
}

.demo-pin[b-n5n8syt12j] {
    position: absolute;
    left: var(--pin-x);
    top: var(--pin-y);
    z-index: 2;
    width: 24px;
    height: 24px;
    border-radius: 50% 50% 50% 2px;
    background: var(--color-brand-yellow);
    color: var(--color-brand-yellow-text);
    font-family: var(--font-monospace);
    font-weight: 700;
    font-size: 10px;
    line-height: 24px;
    text-align: center;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .45);
    transform: rotate(-45deg) scale(0);
    transition: transform .35s cubic-bezier(.2, 1.4, .4, 1);
}

.demo-pin span[b-n5n8syt12j] { display: block; transform: rotate(45deg); }
.demo-pin.is-in[b-n5n8syt12j] { transform: rotate(-45deg) scale(1); }

.demo-transport[b-n5n8syt12j] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-on-stage-hint);
}

.demo-clock[b-n5n8syt12j] {
    font-family: var(--font-monospace);
    font-weight: 600;
    font-size: 11px;
    flex: none;
}

.demo-play[b-n5n8syt12j] {
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 50%;
    background: var(--color-on-stage-tint);
    border: 1px solid var(--color-on-stage-border);
    display: grid;
    place-items: center;
}

.demo-play[b-n5n8syt12j]::before {
    content: "";
    border-left: 7px solid var(--color-text-on-brand);
    border-top: 4.5px solid transparent;
    border-bottom: 4.5px solid transparent;
    margin-left: 2px;
}

/* The timeline is the comment index: every marker is a piece of feedback at its own second. */
.demo-track[b-n5n8syt12j] {
    position: relative;
    flex: 1;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--color-on-stage-divider);
}

.demo-played[b-n5n8syt12j] {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--played);
    border-radius: var(--radius-pill);
    background: var(--color-brand-yellow);
    transition: width .8s linear;
}

.demo-head[b-n5n8syt12j] {
    position: absolute;
    top: 50%;
    left: var(--played);
    width: 13px;
    height: 13px;
    margin: -6.5px 0 0 -6.5px;
    border-radius: 50%;
    background: var(--color-bg-elevated);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
    transition: left .8s linear;
}

.demo-marker[b-n5n8syt12j] {
    position: absolute;
    top: -5px;
    left: var(--marker-x);
    width: 3px;
    height: 16px;
    border-radius: 2px;
    background: var(--color-bg-elevated);
    opacity: 0;
    transition: opacity .3s ease;
}

.demo-marker.is-in[b-n5n8syt12j] { opacity: .85; }

.demo-side[b-n5n8syt12j] {
    display: flex;
    flex-direction: column;
    background: var(--color-bg-elevated);
    border-left: 1px solid var(--color-border);
    min-width: 0;
}

.demo-side-head[b-n5n8syt12j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
}

.demo-count[b-n5n8syt12j] {
    background: var(--color-brand-header);
    color: var(--color-text-on-brand);
    border-radius: var(--radius-pill);
    padding: 1px 7px;
    font-size: 10px;
}

.demo-comment[b-n5n8syt12j] {
    display: grid;
    grid-template-columns: 26px 1fr auto;
    gap: var(--space-2);
    align-items: start;
    padding: 9px 12px;
    border-bottom: 1px solid var(--color-bg-surface-alt);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .4s ease, transform .4s ease;
}

.demo-comment.is-in[b-n5n8syt12j] { opacity: 1; transform: none; }

.demo-avatar[b-n5n8syt12j] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 10px;
    color: var(--color-text-on-brand);
    background: var(--color-brand-header);
}

.demo-comment-copy[b-n5n8syt12j] { min-width: 0; }

.demo-who[b-n5n8syt12j] { display: block; font-weight: 700; font-size: 11px; }

.demo-time[b-n5n8syt12j] {
    font-family: var(--font-monospace);
    font-weight: 700;
    font-size: 10px;
    color: var(--color-brand-header);
    background: var(--color-status-success-bg);
    border-radius: var(--radius-sm);
    padding: 2px 4px;
    margin-right: 5px;
}

.demo-text[b-n5n8syt12j] {
    display: block;
    margin-top: 2px;
    color: var(--color-text-muted);
    font-size: 11px;
}

.demo-comment.is-done .demo-text[b-n5n8syt12j] { text-decoration: line-through; opacity: .55; }

.demo-check[b-n5n8syt12j] {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    flex: none;
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    position: relative;
    transition: background .3s ease, border-color .3s ease;
}

.demo-check.is-done[b-n5n8syt12j] {
    background: var(--color-brand-header);
    border-color: var(--color-brand-header);
}

.demo-check.is-done[b-n5n8syt12j]::after {
    content: "";
    position: absolute;
    left: 4.5px;
    top: 1px;
    width: 3px;
    height: 8px;
    border: solid var(--color-text-on-brand);
    border-width: 0 1.6px 1.6px 0;
    transform: rotate(45deg);
}

/*
  The composer closes the column. Without it the list ends well above the picture's bottom edge and
  leaves a slab of empty white beside it, which reads as a rendering fault rather than as an empty
  state.
*/
.demo-composer[b-n5n8syt12j] {
    margin-top: auto;
    border-top: 1px solid var(--color-border);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.demo-composer-box[b-n5n8syt12j] {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 7px 9px;
    font-size: 11px;
    color: var(--color-text-muted);
    background: var(--color-bg-surface-alt);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.demo-composer-send[b-n5n8syt12j] {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    background: var(--color-brand-header);
    display: grid;
    place-items: center;
}

.demo-composer-send[b-n5n8syt12j]::before {
    content: "";
    border-left: 8px solid var(--color-text-on-brand);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    margin-left: 2px;
}

@media (max-width: 640px) {
    .demo-body[b-n5n8syt12j] { grid-template-columns: 1fr; }
    .demo-side[b-n5n8syt12j] { border-left: 0; border-top: 1px solid var(--color-border); }
}

@media (prefers-reduced-motion: reduce) {
    .demo-pin[b-n5n8syt12j], .demo-marker[b-n5n8syt12j], .demo-played[b-n5n8syt12j], .demo-head[b-n5n8syt12j], .demo-comment[b-n5n8syt12j], .demo-check[b-n5n8syt12j], .demo-chip[b-n5n8syt12j] {
        transition: none;
    }
}
/* /Modules/Home/Components/SmokeBackdrop.razor.rz.scp.css */
/*
  One fixed canvas behind the entire page. The solver reads every knob from the custom properties
  below, so the smoke is tuned here rather than through interop arguments.

  The mask thins the smoke through the middle band of the viewport, which is where headlines and
  running text sit — without it, a plume drifting behind a headline costs the contrast the type
  needs. The alpha cap in the solver handles the other half of the same problem.
*/
.home-smoke[b-16a8zao643] {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
    pointer-events: none;

    --smoke-dye: #2A8E7B;
    --smoke-gain: 2.5;
    --smoke-alpha: 0.72;
    --smoke-ambient: 2.4;
    --smoke-curl: 25;

    -webkit-mask-image: radial-gradient(120% 85% at 50% 45%, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .7) 40%, #000 68%);
    mask-image: radial-gradient(120% 85% at 50% 45%, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .7) 40%, #000 68%);
}

/* Set by the script when WebGL is unavailable: the layout's gradient carries the page alone. */
.home-smoke.is-unavailable[b-16a8zao643] {
    display: none;
}
/* /Modules/Home/Layout/HomeLayout.razor.rz.scp.css */
/*
  Ground for the whole page and the home-only colour scale.

  The deep greens are derived from the brand header token rather than written as literals, so a
  customer theme that repaints --color-brand-header repaints the home page with it. They are
  declared here, on the layout root, because custom properties inherit down the DOM regardless of
  the scope attributes CSS isolation adds — every component below reads them without needing its
  own copy.
*/
.home-layout[b-8k62m5icjy] {
    --home-deep-1: color-mix(in srgb, var(--color-brand-header) 88%, #000);
    --home-deep-2: color-mix(in srgb, var(--color-brand-header) 62%, #000);
    --home-deep-3: color-mix(in srgb, var(--color-brand-header) 40%, #000);

    /* Light sections are veils over the smoke rather than solid plates. Tuned in a browser:
       above .92 the smoke disappears entirely, below .85 body text starts sitting on plumes. */
    --home-veil-paper: color-mix(in srgb, var(--color-bg-surface-alt) 89%, transparent);
    --home-veil-soft: color-mix(in srgb, var(--color-brand-soft) 85%, transparent);
    --home-veil-deep: color-mix(in srgb, var(--home-deep-1) 68%, transparent);
    --home-veil-night: color-mix(in srgb, var(--home-deep-2) 78%, transparent);

    --home-gutter: clamp(20px, 5vw, 72px);
    --home-measure: 1180px;

    --home-on-deep: var(--color-text-on-brand);
    --home-on-deep-soft: color-mix(in srgb, var(--color-text-on-brand) 84%, transparent);
    --home-on-deep-muted: color-mix(in srgb, var(--color-text-on-brand) 62%, transparent);
    --home-on-deep-line: color-mix(in srgb, var(--color-text-on-brand) 26%, transparent);

    min-height: 100vh;
    background: linear-gradient(180deg, var(--home-deep-1) 0%, var(--home-deep-2) 55%, var(--home-deep-3) 100%);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    line-height: 1.62;
}
/* /Modules/Home/Pages/HomePage.razor.rz.scp.css */
/*
  The public home page.

  Every colour resolves from a token in tokens.css or from the --home-* scale the layout derives
  from the brand header, so a customer theme repaints this page with the rest of the product.

  Section grounds are translucent veils over the fixed smoke canvas rather than solid plates: the
  light sections keep it to a faint weather, the deep ones give it room. That is the whole reason
  the smoke can run the length of the page without fighting the running text.
*/

.home-wrap[b-l84sidwd8y] {
    width: 100%;
    max-width: var(--home-measure);
    margin-inline: auto;
    padding-inline: var(--home-gutter);
}

/*
  Fluent's reboot sets colour on headings and font-family plus line-height directly on p, and a
  direct rule beats inheritance no matter how unspecific it is. So the page's own typography never
  reached a single paragraph: running text came out at Fluent's tighter ramp in Fluent's body face,
  and the hero headline was painted near-black over green.

  Restating both here, once, is what keeps the page on its own type. Headings inherit their colour
  so each section states it a single time; paragraphs restate the family and the measure.
*/
.home-hero h1[b-l84sidwd8y],
.home-section h2[b-l84sidwd8y],
.home-section h3[b-l84sidwd8y],
.home-footer h2[b-l84sidwd8y] {
    color: inherit;
}

.home-hero p[b-l84sidwd8y],
.home-section p[b-l84sidwd8y],
.home-footer p[b-l84sidwd8y] {
    font-family: var(--font-body);
    line-height: 1.62;
}

/* ---------------------------------------------------------------- masthead */

.home-masthead[b-l84sidwd8y] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--layer-overlay);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: 16px var(--home-gutter);
    transition: background .3s ease, box-shadow .3s ease, padding .3s ease;
}

/* Class set by homePage.js once the page has scrolled past the hero's top edge. */
.home-masthead.is-stuck[b-l84sidwd8y] {
    background: color-mix(in srgb, var(--color-brand-header) 96%, transparent);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-elevated);
    padding-block: 11px;
}

.home-brand[b-l84sidwd8y] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.28rem;
    letter-spacing: -0.045em;
    color: var(--color-text-on-brand);
    text-decoration: none;
}

.home-brand-dot[b-l84sidwd8y] {
    width: 10px;
    height: 10px;
    border-radius: 2px 50% 50% 50%;
    background: var(--color-brand-yellow);
}

.home-nav[b-l84sidwd8y] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 26px;
}

.home-nav a[b-l84sidwd8y] {
    color: var(--home-on-deep-soft);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    transition: color .2s ease;
}

.home-nav a:hover[b-l84sidwd8y] { color: var(--color-text-on-brand); }

.home-nav-cta[b-l84sidwd8y] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--home-on-deep-line);
    border-radius: var(--radius-md);
    padding: 9px 16px;
    color: var(--color-text-on-brand);
}

.home-nav-cta:hover[b-l84sidwd8y] { background: var(--color-on-stage-tint); }

@media (max-width: 860px) {
    .home-nav a:not(.home-nav-cta)[b-l84sidwd8y] { display: none; }
}

/* ---------------------------------------------------------------- hero */

.home-hero[b-l84sidwd8y] {
    position: relative;
    padding: clamp(120px, 16vh, 180px) 0 0;
    color: var(--color-text-on-brand);
    scroll-margin-top: 84px;
}

.home-eyebrow[b-l84sidwd8y] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0 0 26px;
    padding: 7px 15px;
    border: 1px solid var(--home-on-deep-line);
    border-radius: var(--radius-pill);
    font-family: var(--font-monospace);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--home-on-deep-soft);
}

.home-eyebrow-dot[b-l84sidwd8y] { color: var(--color-brand-yellow); font-weight: 700; }

/* The qualifier wraps to a second line on a phone and strands the separator; drop both there. */
@media (max-width: 620px) {
    .home-eyebrow-wide[b-l84sidwd8y], .home-eyebrow-dot[b-l84sidwd8y] { display: none; }
}

.home-hero-title[b-l84sidwd8y] {
    margin: 0;
    max-width: 15ch;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.6rem, 7.2vw, 5.4rem);
    letter-spacing: -0.035em;
    /* German needs the room: tighter than this and an Ä collides with the line above it. */
    line-height: 1.08;
}

.home-hero-title em[b-l84sidwd8y] {
    font-style: normal;
    color: var(--color-brand-yellow);
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 100% 2px;
    background-position: 0 92%;
    background-repeat: no-repeat;
}

.home-hero-lede[b-l84sidwd8y] {
    margin: 24px 0 0;
    max-width: 52ch;
    font-size: clamp(1.02rem, 1.5vw, 1.22rem);
    color: var(--home-on-deep-soft);
}

.home-hero-actions[b-l84sidwd8y] {
    margin-top: 34px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.home-hero-note[b-l84sidwd8y] {
    margin: var(--space-4) 0 0;
    font-size: .84rem;
    color: var(--home-on-deep-muted);
}

.home-hero-stage[b-l84sidwd8y] {
    margin-top: clamp(48px, 7vw, 78px);
    padding-bottom: clamp(60px, 9vw, 110px);
}

.home-hero-stage[b-l84sidwd8y]  .review-demo {
    max-width: 1000px;
    margin-inline: auto;
}

/* ---------------------------------------------------------------- buttons */

.home-button[b-l84sidwd8y] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    min-height: 48px;
    border: 0;
    border-radius: var(--radius-md);
    padding: 15px 24px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
    transition: transform .16s ease, background .2s ease;
}

.home-button--primary[b-l84sidwd8y] {
    background: var(--color-brand-yellow);
    color: var(--color-brand-yellow-text);
}

.home-button--quiet[b-l84sidwd8y] {
    background: transparent;
    color: var(--color-text-on-brand);
    border: 1px solid var(--home-on-deep-line);
}

.home-button--quiet:hover[b-l84sidwd8y] { background: var(--color-on-stage-tint); }

.home-button--disabled[b-l84sidwd8y],
.home-button:disabled[b-l84sidwd8y] {
    background: var(--color-border);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

@media (hover: hover) {
    .home-button--primary:hover[b-l84sidwd8y] { transform: translateY(-2px); }
    .home-button--disabled:hover[b-l84sidwd8y],
    .home-button:disabled:hover[b-l84sidwd8y] { transform: none; }
}

/* ---------------------------------------------------------------- sections */

.home-section[b-l84sidwd8y] {
    padding-block: clamp(64px, 9vw, 118px);
    /* The masthead is fixed, so anchor jumps have to stop clear of it. */
    scroll-margin-top: 84px;
}

.home-section--paper[b-l84sidwd8y] { background: var(--home-veil-paper); }
.home-section--soft[b-l84sidwd8y] { background: var(--home-veil-soft); }

.home-section--deep[b-l84sidwd8y],
.home-section--night[b-l84sidwd8y] {
    color: var(--color-text-on-brand);
}

.home-section--deep[b-l84sidwd8y] { background: var(--home-veil-deep); }
.home-section--night[b-l84sidwd8y] { background: var(--home-veil-night); }

.home-section-head h2[b-l84sidwd8y] {
    margin: 0;
    max-width: 17ch;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.9rem, 4.2vw, 3.1rem);
    letter-spacing: -0.035em;
    line-height: 1.1;
}

.home-section-head p[b-l84sidwd8y] {
    margin: 18px 0 0;
    max-width: 54ch;
    font-size: clamp(1rem, 1.3vw, 1.12rem);
    color: var(--color-text-secondary);
}

.home-section--deep .home-section-head p[b-l84sidwd8y],
.home-section--night .home-section-head p[b-l84sidwd8y] {
    color: var(--home-on-deep-soft);
}

.home-kicker[b-l84sidwd8y] {
    display: block;
    margin-bottom: var(--space-3);
    font-family: var(--font-monospace);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--color-brand-yellow);
}

/* Yellow carries the kicker on the deep grounds; on paper it would not have the contrast. */
.home-kicker--ink[b-l84sidwd8y] { color: var(--color-brand-header); }

.home-timecode[b-l84sidwd8y] {
    font-family: var(--font-monospace);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--color-brand-header);
}

/* ---------------------------------------------------------------- scroll reveal */

/*
  One gentle entrance, no stagger choreography. The class is added by homePage.js, which also adds
  it to everything at once when the visitor asked for reduced motion — so the rule below never has
  to be the thing that keeps content visible.
*/
[data-reveal][b-l84sidwd8y] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .55s ease, transform .55s ease;
}

[data-reveal].is-revealed[b-l84sidwd8y] {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal][b-l84sidwd8y] { opacity: 1; transform: none; transition: none; }
    .home-masthead[b-l84sidwd8y], .home-button[b-l84sidwd8y], .home-nav a[b-l84sidwd8y] { transition: none; }
}

/* ---------------------------------------------------------------- before and after */

.home-contrast[b-l84sidwd8y] {
    margin-top: 46px;
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    align-items: stretch;
}

.home-contrast-card[b-l84sidwd8y] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: 26px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-elevated);
}

.home-contrast-card p[b-l84sidwd8y] { margin: 0; color: var(--color-text-secondary); font-size: .95rem; }

/*
  The danger token at full strength makes this card louder than the one beside it, which inverts
  the point: the "before" card is the problem being described, the "after" card is the answer and
  should hold the eye. Thinned against the elevated surface it stays recognisably the same warning
  colour without shouting.
*/
.home-contrast-card--before[b-l84sidwd8y] {
    background: color-mix(in srgb, var(--color-status-danger-bg) 35%, var(--color-bg-elevated));
    border-color: color-mix(in srgb, var(--color-danger) 20%, transparent);
}

.home-contrast-card--after[b-l84sidwd8y] {
    border-color: var(--color-brand-header);
    box-shadow: var(--shadow-card);
}

.home-contrast-tag[b-l84sidwd8y] {
    font-family: var(--font-monospace);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-danger);
}

.home-contrast-card--after .home-contrast-tag[b-l84sidwd8y] { color: var(--color-brand-header); }

.home-contrast-quote[b-l84sidwd8y] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.24rem;
    line-height: 1.32;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
}

.home-contrast-card .home-contrast-quote[b-l84sidwd8y] { color: var(--color-text-primary); }

.home-contrast-mail[b-l84sidwd8y] {
    padding: var(--space-3);
    border-left: 3px solid color-mix(in srgb, var(--color-danger) 34%, transparent);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface-alt);
    font-size: .88rem;
    color: var(--color-text-secondary);
}

.home-contrast-list[b-l84sidwd8y] {
    margin: auto 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 9px;
}

.home-contrast-list li[b-l84sidwd8y] {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    font-size: .92rem;
}

.home-tick[b-l84sidwd8y] {
    position: relative;
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    border-radius: var(--radius-sm);
    background: var(--color-brand-header);
}

.home-tick[b-l84sidwd8y]::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 3px;
    width: 4px;
    height: 8px;
    border: solid var(--color-text-on-brand);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ---------------------------------------------------------------- features */

.home-features[b-l84sidwd8y] {
    margin-top: 46px;
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-border);
    overflow: hidden;
}

.home-feature[b-l84sidwd8y] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: 28px 26px;
    background: var(--color-bg-surface-alt);
    transition: background .2s ease;
}

.home-feature h3[b-l84sidwd8y] {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.12rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.home-feature p[b-l84sidwd8y] { margin: 0; color: var(--color-text-secondary); font-size: .93rem; }

/* One vocabulary for the badges: a timecode or a four-letter key, as the product labels things. */
.home-feature-key[b-l84sidwd8y] {
    align-self: flex-start;
    padding: 6px 10px;
    border-radius: var(--radius-md);
    background: var(--color-brand-header);
    color: var(--color-brand-yellow);
    font-family: var(--font-monospace);
    font-weight: 700;
    font-size: .68rem;
    letter-spacing: .1em;
}

@media (hover: hover) {
    .home-feature:hover[b-l84sidwd8y] { background: var(--color-bg-elevated); }
}

/* ---------------------------------------------------------------- walkthrough */

.home-steps[b-l84sidwd8y] {
    margin-top: 54px;
    display: grid;
    gap: clamp(42px, 6vw, 76px);
}

.home-step[b-l84sidwd8y] {
    display: grid;
    gap: clamp(24px, 4vw, 54px);
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
}

.home-step:nth-child(even) .home-step-copy[b-l84sidwd8y] { order: 2; }

.home-step-copy[b-l84sidwd8y] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.home-step-copy h3[b-l84sidwd8y] {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.3rem, 2.4vw, 1.72rem);
    letter-spacing: -0.03em;
    line-height: 1.14;
}

.home-step-copy p[b-l84sidwd8y] { margin: 0; color: var(--color-text-secondary); }

.home-step-index[b-l84sidwd8y] {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-3);
    font-family: var(--font-monospace);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-brand-header);
}

.home-step-index i[b-l84sidwd8y] {
    font-style: normal;
    padding: 3px 7px;
    border-radius: var(--radius-sm);
    background: var(--color-brand-header);
    color: var(--color-text-on-brand);
}

.home-step-aside[b-l84sidwd8y] {
    padding: 12px 16px;
    border-left: 3px solid var(--color-brand-yellow);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: var(--color-bg-elevated);
    font-size: .88rem;
}

@media (max-width: 820px) {
    .home-step[b-l84sidwd8y] { grid-template-columns: 1fr; }
    .home-step:nth-child(even) .home-step-copy[b-l84sidwd8y] { order: 0; }
}

/* ---------------------------------------------------------------- pricing */

.home-plans[b-l84sidwd8y] {
    margin-top: 48px;
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    align-items: start;
}

.home-plan[b-l84sidwd8y] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: 30px 26px;
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
}

.home-plan.is-highlighted[b-l84sidwd8y] {
    border-color: var(--color-brand-yellow);
    box-shadow: var(--shadow-elevated);
}

.home-plan-name[b-l84sidwd8y] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.16rem;
    letter-spacing: -0.02em;
}

.home-plan-flag[b-l84sidwd8y] {
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    background: var(--color-brand-yellow);
    color: var(--color-brand-yellow-text);
    font-family: var(--font-monospace);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.home-plan-price[b-l84sidwd8y] {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 2.7rem;
    letter-spacing: -0.045em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.home-plan-price span[b-l84sidwd8y] {
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--color-text-muted);
}

.home-plan-storage[b-l84sidwd8y] {
    padding: 8px 11px;
    border-radius: var(--radius-md);
    background: var(--color-status-success-bg);
    color: var(--color-status-success-text);
    font-family: var(--font-monospace);
    font-size: .8rem;
    font-weight: 700;
    text-align: center;
}

.home-plan ul[b-l84sidwd8y] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 9px;
    font-size: .93rem;
    color: var(--color-text-secondary);
}

.home-plan ul li[b-l84sidwd8y] {
    display: flex;
    gap: 9px;
    align-items: flex-start;
}

.home-plan ul li[b-l84sidwd8y]::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    margin-top: .55em;
    border-radius: 50%;
    background: var(--color-brand-header);
}

.home-plan .home-button[b-l84sidwd8y] {
    margin-top: auto;
    width: 100%;
}

.home-plans-note[b-l84sidwd8y] {
    margin: 26px 0 0;
    max-width: 62ch;
    padding-left: var(--space-3);
    border-left: 3px solid var(--color-brand-yellow);
    font-size: .86rem;
    color: var(--home-on-deep-soft);
}

/* ---------------------------------------------------------------- access */

.home-access[b-l84sidwd8y] {
    margin-top: 44px;
    display: grid;
    gap: clamp(26px, 4vw, 54px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    align-items: start;
}

.home-access-copy[b-l84sidwd8y] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: flex-start;
}

.home-access-copy p[b-l84sidwd8y] { margin: 0; color: var(--color-text-secondary); }

.home-notice[b-l84sidwd8y] {
    align-self: stretch;
    display: flex;
    gap: var(--space-3);
    padding: 18px 20px;
    border-left: 4px solid var(--color-brand-yellow);
    border-radius: var(--radius-lg);
    background: var(--color-status-warning-bg);
    color: var(--color-status-warning-text);
    font-size: .94rem;
}

.home-notice strong[b-l84sidwd8y] {
    display: block;
    margin-bottom: 4px;
    font-family: var(--font-display);
    font-size: 1rem;
}

.home-access-form[b-l84sidwd8y] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: 26px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-elevated);
}

/* display: contents keeps the disabled fieldset out of the flex layout it wraps. */
.home-access-form fieldset[b-l84sidwd8y] {
    display: contents;
    margin: 0;
    padding: 0;
    border: 0;
}

.home-access-form legend[b-l84sidwd8y] {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.14rem;
    letter-spacing: -0.02em;
}

.home-field[b-l84sidwd8y] {
    display: grid;
    gap: var(--space-2);
}

.home-field label[b-l84sidwd8y] {
    font-size: .8rem;
    font-weight: 700;
    color: var(--color-text-secondary);
}

.home-field input[b-l84sidwd8y] {
    min-height: 48px;
    padding: 13px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface-alt);
    color: var(--color-text-primary);
    font: inherit;
    font-size: .95rem;
}

.home-field input:disabled[b-l84sidwd8y] {
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.home-access-legal[b-l84sidwd8y] {
    margin: 0;
    font-size: .8rem;
    color: var(--color-text-muted);
}

@media (max-width: 900px) {
    .home-access[b-l84sidwd8y] { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- data and law */

/* Four cards: two by two reads as a set, where auto-fit strands the fourth on its own row. */
.home-legal[b-l84sidwd8y] {
    margin-top: 44px;
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
}

@media (min-width: 760px) {
    .home-legal[b-l84sidwd8y] { grid-template-columns: repeat(2, 1fr); }
}

.home-legal-card[b-l84sidwd8y] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: 24px;
    border: 1px solid var(--home-on-deep-line);
    border-radius: var(--radius-lg);
    background: var(--color-on-stage-tint);
}

.home-legal-card h3[b-l84sidwd8y] {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.06rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.home-legal-card p[b-l84sidwd8y] { margin: 0; color: var(--home-on-deep-soft); font-size: .92rem; }

.home-legal-card dl[b-l84sidwd8y] {
    margin: 0;
    display: grid;
    gap: var(--space-2);
    font-size: .88rem;
}

.home-legal-card dt[b-l84sidwd8y] { font-weight: 700; }
.home-legal-card dd[b-l84sidwd8y] { margin: 0; color: var(--home-on-deep-soft); }

/* ---------------------------------------------------------------- footer */

.home-footer[b-l84sidwd8y] {
    padding-block: 54px;
    background: color-mix(in srgb, var(--home-deep-3) 92%, transparent);
    color: var(--home-on-deep-soft);
    font-size: .88rem;
}

.home-footer-top[b-l84sidwd8y] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--home-on-deep-line);
}

.home-footer-blurb[b-l84sidwd8y] {
    margin: var(--space-3) 0 0;
    max-width: 34ch;
}

.home-footer-links[b-l84sidwd8y] {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 26px;
}

.home-footer-links a[b-l84sidwd8y] {
    color: var(--home-on-deep-soft);
    text-decoration: none;
}

.home-footer-links a:hover[b-l84sidwd8y] { color: var(--color-brand-yellow); }

.home-footer-bottom[b-l84sidwd8y] {
    margin-top: var(--space-4);
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    justify-content: space-between;
}

.home-footer-status[b-l84sidwd8y] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-monospace);
    font-size: .74rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-brand-yellow);
}

.home-footer-status i[b-l84sidwd8y] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-brand-yellow);
    animation: home-pulse-b-l84sidwd8y 2.4s ease-in-out infinite;
}

@keyframes home-pulse-b-l84sidwd8y {
    0%, 100% { opacity: 1; }
    50% { opacity: .3; }
}

@media (prefers-reduced-motion: reduce) {
    .home-footer-status i[b-l84sidwd8y] { animation: none; }
}
/* /Modules/Notifications/Components/NotificationBell.razor.rz.scp.css */
.notification-bell-host[b-incrc25gut] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.notification-bell-trigger[b-incrc25gut] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text-on-brand);
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.notification-bell-trigger:hover[b-incrc25gut] {
    background: var(--color-on-stage-tint);
}

/* Touch has no hover, so the affordance comes from the pressed state instead. */
@media (pointer: coarse) {
    .notification-bell-trigger[b-incrc25gut] {
        width: 44px;
        height: 44px;
    }

    .notification-bell-trigger:hover[b-incrc25gut] {
        background: transparent;
    }

    .notification-bell-trigger:active[b-incrc25gut] {
        background: var(--color-on-stage-tint);
    }
}

.notification-bell-trigger:focus-visible[b-incrc25gut] {
    outline: 2px solid var(--color-brand-yellow);
    outline-offset: 2px;
}

/*
  Sits on the button's corner and leans outwards, so it clips the bell's corner rather than covering the
  glyph. Inside the button it landed on top of the bell: a two-digit count is 23px wide and the whole control
  is 36, which leaves the badge nowhere to go that is not the middle.
*/
.notification-bell-badge[b-incrc25gut] {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-pill);
    background: var(--color-brand-red);
    color: var(--color-text-on-brand);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    /* A ring in the header's own colour, so the badge reads as sitting on the bell rather than merging with it. */
    box-shadow: 0 0 0 2px var(--color-brand-header);
}

@media (prefers-reduced-motion: reduce) {
    .notification-bell-trigger[b-incrc25gut] {
        transition: none;
    }
}

.notification-bell-menu[b-incrc25gut] {
    width: min(360px, 92vw);
    max-height: 480px;
    overflow: hidden;
    padding: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-elevated);
}

.notification-bell-menu-header[b-incrc25gut] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-display);
}

.notification-bell-menu-title[b-incrc25gut] {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.notification-bell-mark-all[b-incrc25gut] {
    font-size: 12px;
}

.notification-bell-empty[b-incrc25gut] {
    padding: 24px 16px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 13px;
}

.notification-bell-list[b-incrc25gut] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 360px;
    overflow-y: auto;
}

.notification-bell-item[b-incrc25gut] {
    border-bottom: 1px solid var(--color-border);
}

.notification-bell-item.unread[b-incrc25gut] {
    background: var(--color-bg-hover);
}

.notification-bell-item:last-child[b-incrc25gut] {
    border-bottom: none;
}

.notification-bell-item-button[b-incrc25gut] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    color: var(--color-text-primary);
}

.notification-bell-item-button:hover[b-incrc25gut] {
    background: var(--color-bg-hover);
}

.notification-bell-item-title[b-incrc25gut] {
    font-size: 13px;
    font-weight: 600;
}

.notification-bell-item-message[b-incrc25gut] {
    font-size: 12px;
    color: var(--color-text-muted);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.notification-bell-item-meta[b-incrc25gut] {
    font-size: 11px;
    color: var(--color-text-muted);
}

.notification-bell-menu-footer[b-incrc25gut] {
    padding: 8px 12px;
    border-top: 1px solid var(--color-border);
    text-align: right;
}
/* /Modules/Notifications/Pages/NotificationCenter.razor.rz.scp.css */
.notification-page[b-cuknxbonhf] {
    max-width: 820px;
    margin: 0 auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    font-family: var(--font-body);
    color: var(--color-text-primary);
}

.notification-page-header[b-cuknxbonhf] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.notification-page-title[b-cuknxbonhf] {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 800;
    margin: 0;
    color: var(--color-text-primary);
}

.notification-page-subtitle[b-cuknxbonhf] {
    margin: 4px 0 0;
    color: var(--color-text-muted);
    font-size: 14px;
}

.notification-page-actions[b-cuknxbonhf] {
    display: flex;
    gap: 8px;
}

.notification-filter-row[b-cuknxbonhf] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.notification-chip[b-cuknxbonhf] {
    padding: 6px 12px;
    min-width: 44px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--font-display);
    letter-spacing: 0.02em;
    color: var(--color-text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.notification-chip:hover:not(:disabled)[b-cuknxbonhf] {
    background: var(--color-bg-hover);
}

.notification-chip:focus-visible[b-cuknxbonhf] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.notification-chip.active[b-cuknxbonhf] {
    background: var(--color-brand-header);
    border-color: var(--color-brand-header);
    color: var(--color-text-on-brand);
}

.notification-chip:disabled[b-cuknxbonhf] {
    cursor: not-allowed;
    opacity: 0.5;
}

.notification-empty[b-cuknxbonhf] {
    padding: 48px 16px;
    text-align: center;
    color: var(--color-text-muted);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
}

.notification-card-list[b-cuknxbonhf] {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-bg-elevated);
}

.notification-card[b-cuknxbonhf] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    padding: 16px;
    align-items: center;
    background: var(--color-bg-surface);
    border-bottom: 1px solid var(--color-border);
}

.notification-card:last-child[b-cuknxbonhf] {
    border-bottom: none;
}

.notification-card.unread[b-cuknxbonhf] {
    background: var(--color-bg-hover);
}

.notification-card-icon[b-cuknxbonhf] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-surface-alt);
    color: var(--color-text-secondary);
}

.notification-card-icon-status[b-cuknxbonhf] {
    background: var(--color-status-warning-bg);
    color: var(--color-status-warning-text);
}

.notification-card-icon-comment[b-cuknxbonhf] {
    background: var(--color-status-success-bg);
    color: var(--color-status-success-text);
}

.notification-card-icon-invitation[b-cuknxbonhf] {
    background: var(--color-status-danger-bg);
    color: var(--color-status-danger-text);
}

.notification-card-body[b-cuknxbonhf] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.notification-card-title[b-cuknxbonhf] {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.notification-card-message[b-cuknxbonhf] {
    color: var(--color-text-muted);
    font-size: 13px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.notification-card-meta[b-cuknxbonhf] {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 4px;
}

.notification-card-actions[b-cuknxbonhf] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
}

@media (max-width: 640px) {
    .notification-card[b-cuknxbonhf] {
        grid-template-columns: auto 1fr;
    }
    .notification-card-actions[b-cuknxbonhf] {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: flex-end;
    }
    .notification-chip[b-cuknxbonhf] {
        min-height: 44px;
    }
}
/* /Modules/Profile/Pages/Profile.razor.rz.scp.css */
.profile-page[b-6qi9e212ds] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px 28px;
    font-family: var(--font-body);
    color: var(--color-text-primary);
    max-width: 960px;
}

.profile-page-header[b-6qi9e212ds] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.profile-title[b-6qi9e212ds] {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    margin: 0;
    color: var(--color-text-primary);
}

.profile-subtitle[b-6qi9e212ds] {
    margin: 4px 0 0;
    color: var(--color-text-muted);
    font-size: 13px;
}

.profile-page-actions[b-6qi9e212ds] {
    display: flex;
    gap: 8px;
}

.profile-empty[b-6qi9e212ds] {
    padding: 48px 16px;
    text-align: center;
    color: var(--color-text-muted);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.profile-card[b-6qi9e212ds] {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.profile-card-header[b-6qi9e212ds] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
}

.profile-card-title[b-6qi9e212ds] {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.profile-card-meta[b-6qi9e212ds] {
    margin: 4px 0 0;
    color: var(--color-text-muted);
    font-size: 12px;
}

.profile-card-body[b-6qi9e212ds] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.profile-grid-2[b-6qi9e212ds] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 640px) {
    .profile-grid-2[b-6qi9e212ds] {
        grid-template-columns: 1fr;
    }
}

.profile-card-identity[b-6qi9e212ds] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
}

.profile-identity-avatar[b-6qi9e212ds] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: var(--radius-pill);
    background: var(--color-brand-yellow);
    color: var(--color-brand-yellow-text);
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
}

.profile-identity-text[b-6qi9e212ds] {
    display: flex;
    flex-direction: column;
}

.profile-identity-name[b-6qi9e212ds] {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
}

.profile-identity-studio[b-6qi9e212ds] {
    font-size: 13px;
    color: var(--color-text-secondary);
}

.profile-identity-role[b-6qi9e212ds] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.profile-field-label[b-6qi9e212ds] {
    display: block;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin-bottom: 6px;
}

.branding-priority-hint[b-6qi9e212ds] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    background: var(--color-bg-surface-alt);
    border-left: 3px solid var(--color-brand-yellow);
    border-radius: var(--radius-sm);
    font-size: 13px;
}

.branding-priority-hint strong[b-6qi9e212ds] {
    font-family: var(--font-display);
    font-size: 12px;
}

.theme-grid[b-6qi9e212ds] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.theme-row[b-6qi9e212ds] {
    display: grid;
    grid-template-columns: 120px 40px 1fr auto;
    align-items: center;
    gap: 12px;
}

.theme-row-label[b-6qi9e212ds] {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
}

.theme-color-input[b-6qi9e212ds] {
    width: 40px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: transparent;
}

.theme-row-value[b-6qi9e212ds] {
    font-family: monospace;
    font-size: 12px;
}

.theme-preview[b-6qi9e212ds] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.theme-preview-header[b-6qi9e212ds] {
    background: var(--preview-header);
    color: #ffffff;
    padding: 8px 14px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
}

.theme-preview-stage[b-6qi9e212ds] {
    background: var(--preview-stage);
    color: #ffffff;
    padding: 28px 18px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.theme-preview-accent[b-6qi9e212ds] {
    background: var(--preview-accent);
    color: #1a1a1a;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
}

.theme-preview-warn[b-6qi9e212ds] {
    background: var(--preview-warn);
    color: #ffffff;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
}

.theme-preview-caption[b-6qi9e212ds] {
    background: var(--preview-soft);
    padding: 8px 14px;
    font-size: 11px;
}

.watermark-dropzone[b-6qi9e212ds] {
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    padding: 16px;
    background: var(--color-bg-surface-alt);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.watermark-file-input[b-6qi9e212ds] {
    font-size: 12px;
}

.watermark-corner-row[b-6qi9e212ds] {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.watermark-corner[b-6qi9e212ds] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-bg-surface);
    cursor: pointer;
    position: relative;
}

.watermark-corner.active[b-6qi9e212ds] {
    border-color: var(--color-brand-header);
    background: var(--color-bg-hover);
}

.watermark-corner-dot[b-6qi9e212ds] {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--color-brand-header);
    border-radius: 2px;
}

.watermark-corner-tl[b-6qi9e212ds] { top: 4px; left: 4px; }
.watermark-corner-tr[b-6qi9e212ds] { top: 4px; right: 4px; }
.watermark-corner-bl[b-6qi9e212ds] { bottom: 4px; left: 4px; }
.watermark-corner-br[b-6qi9e212ds] { bottom: 4px; right: 4px; }

.watermark-opacity[b-6qi9e212ds] {
    width: 100%;
}

.watermark-preview[b-6qi9e212ds] {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    background: var(--color-bg-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 12px;
}

.watermark-image[b-6qi9e212ds] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.muted[b-6qi9e212ds] {
    color: var(--color-text-muted);
    font-size: 12px;
}

.muted.small[b-6qi9e212ds] {
    font-size: 11px;
}

.dialog-form[b-6qi9e212ds] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
    min-width: 360px;
}

.dialog-error[b-6qi9e212ds] {
    color: var(--color-status-danger-text);
    background: var(--color-status-danger-bg);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    margin: 0;
}
/* /Modules/Projects/Pages/ProjectDetail.razor.rz.scp.css */
.project-detail-page[b-iroyhm48dc] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px 28px;
    font-family: var(--font-body);
    color: var(--color-text-primary);
}

.project-detail-header[b-iroyhm48dc] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.project-detail-breadcrumb a[b-iroyhm48dc] {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

.project-detail-breadcrumb a:hover[b-iroyhm48dc] {
    color: var(--color-brand-header);
    text-decoration: underline;
}

.project-detail-header-row[b-iroyhm48dc] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.project-detail-title[b-iroyhm48dc] {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    margin: 0;
    color: var(--color-text-primary);
}

.project-detail-subtitle[b-iroyhm48dc] {
    margin: 4px 0 0;
    color: var(--color-text-muted);
    font-size: 13px;
}

.project-detail-actions[b-iroyhm48dc] {
    display: flex;
    gap: 8px;
}

.project-detail-empty[b-iroyhm48dc] {
    padding: 48px 16px;
    text-align: center;
    color: var(--color-text-muted);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.project-card[b-iroyhm48dc] {
    /* Elevated, not the page's own colour. A card painted in the background behind it stops reading as a card,
       which was true of every one of these. */
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.project-card-header[b-iroyhm48dc] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-surface-alt);
}

.project-card-title[b-iroyhm48dc] {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    color: var(--color-text-primary);
}

.project-card-meta[b-iroyhm48dc] {
    margin: 4px 0 0;
    color: var(--color-text-muted);
    font-size: 12px;
}

.project-card-body[b-iroyhm48dc] {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.status-badge[b-iroyhm48dc] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
}

.status-badge.status-active[b-iroyhm48dc] {
    background: var(--color-status-success-bg);
    color: var(--color-status-success-text);
}

.status-badge.status-archived[b-iroyhm48dc] {
    background: var(--color-status-danger-bg);
    color: var(--color-status-danger-text);
}

.project-customer-theme[b-iroyhm48dc] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 4px;
}

.project-customer-theme-label[b-iroyhm48dc] {
    font-size: 12px;
    color: var(--color-text-secondary);
    font-weight: 600;
}

.theme-swatches[b-iroyhm48dc] {
    display: inline-flex;
    gap: 6px;
}

.theme-swatch[b-iroyhm48dc] {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid var(--color-border);
    display: inline-block;
}

.theme-swatch.fallback[b-iroyhm48dc] {
    border-style: dashed;
}

.theme-swatch-header[b-iroyhm48dc] {
    background: var(--swatch-color, var(--color-brand-header));
}

.theme-swatch-stage[b-iroyhm48dc] {
    background: var(--swatch-color, var(--color-brand-stage));
}

.theme-swatch-soft[b-iroyhm48dc] {
    background: var(--swatch-color, var(--color-brand-soft));
}

.theme-swatch-accent[b-iroyhm48dc] {
    background: var(--swatch-color, var(--color-brand-yellow));
}

.theme-swatch-warn[b-iroyhm48dc] {
    background: var(--swatch-color, var(--color-brand-red));
}

.project-stats-grid[b-iroyhm48dc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.project-stat[b-iroyhm48dc] {
    background: var(--color-bg-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.project-stat-value[b-iroyhm48dc] {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 800;
    color: var(--color-text-primary);
    line-height: 1;
}

.project-stat-label[b-iroyhm48dc] {
    font-size: 12px;
    color: var(--color-text-secondary);
    font-weight: 600;
}

.project-stat-sub[b-iroyhm48dc] {
    font-size: 11px;
}

[b-iroyhm48dc] .danger-button {
    --accent-fill-rest: var(--color-status-danger-text);
    --accent-fill-hover: var(--color-brand-red);
}

.muted[b-iroyhm48dc] {
    color: var(--color-text-muted);
    font-size: 12px;
}

.muted.small[b-iroyhm48dc] {
    font-size: 11px;
}

.project-delete-preview[b-iroyhm48dc] {
    margin: var(--space-2) 0;
    padding-inline-start: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-family: var(--font-base);
    font-size: 14px;
}

/* The archived state, beside the title. Only drawn when archived — a chip saying "normal" on every project
   would say nothing. */
.project-detail-title-row[b-iroyhm48dc] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* Holds archiving and deleting, which used to be a section at the foot of the page — the place a reader
   scrolls past. */
.project-detail-menu-button[b-iroyhm48dc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.project-detail-menu-button:hover[b-iroyhm48dc] {
    background: var(--color-bg-hover);
    color: var(--color-brand-header);
}

@media (pointer: coarse) {
    .project-detail-menu-button[b-iroyhm48dc] {
        width: 44px;
        height: 44px;
    }

    .project-detail-menu-button:hover[b-iroyhm48dc] {
        background: var(--color-bg-elevated);
        color: var(--color-text-secondary);
    }

    .project-detail-menu-button:active[b-iroyhm48dc] {
        background: var(--color-bg-hover);
    }
}

.project-detail-menu-button:focus-visible[b-iroyhm48dc] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

[b-iroyhm48dc] .project-detail-menu-danger {
    color: var(--color-status-danger-text);
}

/* Statistics carry no header of their own: they are the first thing on the page and a heading over three
   numbers reads as ceremony. */
.project-card-stats .project-stats-grid[b-iroyhm48dc] {
    padding: var(--space-4);
}

/* Name and customer side by side, description and theme beneath — the customer is a field of the project like
   the others, and a section of its own gave one dropdown the weight of a heading. */
.project-master-grid[b-iroyhm48dc] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-3) var(--space-4);
    align-items: start;
}

/* One grid cell per field, with the label above its control inside it. */
.project-master-field[b-iroyhm48dc] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

[b-iroyhm48dc] .project-master-input {
    width: 100%;
}

.project-master-description[b-iroyhm48dc] {
    grid-column: 1 / -1;
}

.project-master-theme[b-iroyhm48dc] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .project-master-grid[b-iroyhm48dc] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The absorbed video list. It brings its own padding, so the card adds none. */
.project-card-videos[b-iroyhm48dc] {
    overflow: visible;
}
/* /Modules/Projects/Pages/Projects.razor.rz.scp.css */
.projects-page[b-mwsqq0xm6u] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px 28px;
    font-family: var(--font-body);
    color: var(--color-text-primary);
}

.projects-header[b-mwsqq0xm6u] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.projects-title[b-mwsqq0xm6u] {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    margin: 0;
    color: var(--color-text-primary);
}

.projects-summary[b-mwsqq0xm6u] {
    margin: 4px 0 0;
    color: var(--color-text-muted);
    font-size: 13px;
}

.projects-actionbar[b-mwsqq0xm6u] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.projects-search[b-mwsqq0xm6u] {
    flex: 1 1 240px;
    min-width: 200px;
}

.projects-filter[b-mwsqq0xm6u] {
    min-width: 160px;
}

.projects-grid-section[b-mwsqq0xm6u] {
    background: transparent;
}

.projects-empty[b-mwsqq0xm6u] {
    padding: 48px 16px;
    text-align: center;
    color: var(--color-text-muted);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.projects-grid[b-mwsqq0xm6u] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.project-card[b-mwsqq0xm6u] {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.project-card:hover[b-mwsqq0xm6u] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-elevated);
}

.project-card.archived[b-mwsqq0xm6u] {
    opacity: 0.65;
}

.project-thumb[b-mwsqq0xm6u] {
    height: 100px;
    background: var(--thumb-color, var(--color-brand-stage));
    color: var(--color-text-on-brand);
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 10px 12px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.project-thumb-videos[b-mwsqq0xm6u] {
    background: rgba(0, 0, 0, 0.35);
    color: #ffffff;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.project-body[b-mwsqq0xm6u] {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.project-body-row[b-mwsqq0xm6u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.project-name[b-mwsqq0xm6u] {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.2;
}

.project-customer[b-mwsqq0xm6u] {
    font-size: 12px;
    color: var(--color-text-secondary);
}

.project-description[b-mwsqq0xm6u] {
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.project-badge[b-mwsqq0xm6u] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.status-dot[b-mwsqq0xm6u] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.project-badge-warning[b-mwsqq0xm6u] {
    background: var(--color-status-warning-bg);
    color: var(--color-status-warning-text);
}

.project-badge-neutral[b-mwsqq0xm6u] {
    background: var(--color-bg-surface-alt);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

.project-badge-archived[b-mwsqq0xm6u] {
    background: var(--color-status-danger-bg);
    color: var(--color-status-danger-text);
}

.project-footer[b-mwsqq0xm6u] {
    padding: 10px 14px;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}

.project-open-link[b-mwsqq0xm6u] {
    color: var(--color-brand-header);
    font-weight: 600;
}

.project-card-add[b-mwsqq0xm6u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 240px;
    background: transparent;
    border: 2px dashed var(--color-border);
    box-shadow: none;
    color: var(--color-text-muted);
    font-family: var(--font-display);
    font-weight: 700;
    cursor: pointer;
}

.project-card-add:hover[b-mwsqq0xm6u] {
    border-color: var(--color-brand-header);
    color: var(--color-brand-header);
    transform: none;
    box-shadow: none;
}

.project-card-add:disabled[b-mwsqq0xm6u] {
    opacity: 0.5;
    cursor: not-allowed;
}

.muted[b-mwsqq0xm6u] {
    color: var(--color-text-muted);
    font-size: 12px;
}

.dialog-form[b-mwsqq0xm6u] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
    min-width: 360px;
}
/* /Modules/PublicReview/Components/CommentCard.razor.rz.scp.css */
.public-comment-card[b-4cb4zwsacy] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px 10px 16px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid transparent;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    transition: background-color 150ms ease, box-shadow 150ms ease;
}

.public-comment-card:hover[b-4cb4zwsacy] {
    background: var(--color-bg-hover);
}

.public-comment-card--priority-normal[b-4cb4zwsacy] {
    border-left-color: var(--color-brand-yellow);
}

.public-comment-card--priority-high[b-4cb4zwsacy] {
    border-left-color: var(--color-brand-red);
}

.public-comment-card--active[b-4cb4zwsacy] {
    background: var(--color-bg-selected);
    box-shadow: inset 0 0 0 2px var(--color-brand-header);
}

@media (prefers-reduced-motion: reduce) {
    .public-comment-card[b-4cb4zwsacy] {
        transition: none;
    }
}

.public-comment-card-seek[b-4cb4zwsacy] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.public-comment-card-seek:focus-visible[b-4cb4zwsacy] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.public-comment-card-head[b-4cb4zwsacy] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

.public-comment-card-timecode[b-4cb4zwsacy] {
    font-family: var(--font-monospace);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.public-comment-card-author[b-4cb4zwsacy] {
    display: inline-block;
    max-width: 100%;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-comment-card-time[b-4cb4zwsacy] {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-left: auto;
}

.public-comment-card-text[b-4cb4zwsacy] {
    display: block;
    color: var(--color-text-secondary);
    font-size: 13px;
    line-height: 1.5;
    word-break: break-word;
}

.public-comment-card-actions[b-4cb4zwsacy] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.public-comment-card-action[b-4cb4zwsacy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 4px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text-secondary);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.public-comment-card-action:hover[b-4cb4zwsacy] {
    background: var(--color-bg-hover);
}

.public-comment-card-action:focus-visible[b-4cb4zwsacy] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.public-comment-card-action--primary[b-4cb4zwsacy] {
    background: var(--color-brand-header);
    border-color: var(--color-brand-header);
    color: var(--color-text-on-brand);
}

.public-comment-card-edit[b-4cb4zwsacy] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

[b-4cb4zwsacy] .public-comment-card-edit-text {
    width: 100%;
}

.public-comment-card-edit-actions[b-4cb4zwsacy] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

@media (pointer: coarse) {
    .public-comment-card-action[b-4cb4zwsacy] {
        min-height: 44px;
        min-width: 44px;
    }
}
/* /Modules/PublicReview/Components/CommentComposer.razor.rz.scp.css */
.public-comment-composer[b-z1ysc6ua43] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: var(--color-bg-elevated);
    border-top: 1px solid var(--color-border);
    font-family: var(--font-body);
}

.public-comment-composer-head[b-z1ysc6ua43] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.public-comment-composer-label[b-z1ysc6ua43] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    color: var(--color-text-primary);
}

.public-comment-composer-timecode[b-z1ysc6ua43] {
    font-family: var(--font-monospace);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--color-bg-surface-alt);
    color: var(--color-text-secondary);
}

.public-comment-composer-consent-hint[b-z1ysc6ua43] {
    margin: 0;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    background: var(--color-status-warning-bg);
    color: var(--color-status-warning-text);
    font-size: 12px;
}

[b-z1ysc6ua43] .public-comment-composer-text {
    width: 100%;
}

.public-comment-composer-identity[b-z1ysc6ua43] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.public-comment-composer-name-field[b-z1ysc6ua43] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

[b-z1ysc6ua43] .public-comment-composer-name,
[b-z1ysc6ua43] .public-comment-composer-email {
    width: 100%;
}

.public-comment-composer-reset[b-z1ysc6ua43] {
    align-self: flex-start;
    border: none;
    background: none;
    padding: 0;
    color: var(--color-brand-header);
    font-size: 11px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    min-height: 24px;
}

.public-comment-composer-hint[b-z1ysc6ua43] {
    margin: 0;
    font-size: 11px;
    color: var(--color-text-muted);
}

.public-comment-composer-error[b-z1ysc6ua43] {
    display: block;
    color: var(--color-status-danger-text);
    font-size: 12px;
}

[b-z1ysc6ua43] .public-comment-composer-submit {
    --accent-fill-rest: var(--color-brand-header);
    --accent-fill-hover: var(--color-brand-header-hover);
    --accent-fill-active: var(--color-brand-header-hover);
    align-self: flex-end;
    min-height: 44px;
}

@media (max-width: 480px) {
    .public-comment-composer-identity[b-z1ysc6ua43] {
        grid-template-columns: 1fr;
    }
}

@media (pointer: coarse) {
    .public-comment-composer-reset[b-z1ysc6ua43] {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

.public-comment-composer-anchor[b-z1ysc6ua43] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    font-family: var(--font-base);
    font-size: 13px;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.public-comment-composer-anchor-checkbox[b-z1ysc6ua43] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-brand-header);
    cursor: pointer;
}

.public-comment-composer-name-value[b-z1ysc6ua43] {
    font-family: var(--font-base);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.public-comment-composer-annotate[b-z1ysc6ua43] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.public-comment-composer-annotate-button[b-z1ysc6ua43] {
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.public-comment-composer-annotate-button:hover[b-z1ysc6ua43] {
    background: var(--color-bg-hover);
}

.public-comment-composer-annotate-button:focus-visible[b-z1ysc6ua43] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

@media (pointer: coarse) {
    .public-comment-composer-annotate-button:hover[b-z1ysc6ua43] {
        background: var(--color-bg-elevated);
    }
}
/* /Modules/PublicReview/Components/CommentSidebar.razor.rz.scp.css */
.public-comment-sidebar[b-i82b386yqq] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: var(--color-bg-elevated);
    font-family: var(--font-body);
}

.public-comment-sidebar-header[b-i82b386yqq] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 16px 8px;
}

.public-comment-sidebar-title[b-i82b386yqq] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.public-comment-sidebar-name[b-i82b386yqq] {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
}

.public-comment-sidebar-filters[b-i82b386yqq] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 16px 12px;
}

.public-comment-filter-chip[b-i82b386yqq] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 32px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-secondary);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.public-comment-filter-chip:hover[b-i82b386yqq] {
    background: var(--color-bg-hover);
}

.public-comment-filter-chip--active[b-i82b386yqq] {
    background: var(--color-brand-header);
    border-color: var(--color-brand-header);
    color: var(--color-text-on-brand);
}

.public-comment-filter-chip:focus-visible[b-i82b386yqq] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.public-comment-filter-chip-count[b-i82b386yqq] {
    opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
    .public-comment-filter-chip[b-i82b386yqq] {
        transition: none;
    }
}

@media (pointer: coarse) {
    .public-comment-filter-chip[b-i82b386yqq] {
        min-height: 44px;
    }
}

.public-comment-sidebar-list[b-i82b386yqq] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 16px 16px;
}

.public-comment-sidebar-empty[b-i82b386yqq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 32px 16px;
    text-align: center;
}

.public-comment-sidebar-empty-title[b-i82b386yqq] {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--color-text-primary);
}
/* /Modules/PublicReview/Components/CommentThread.razor.rz.scp.css */
.public-comment-thread[b-wvocx02iwm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* The indent and the rule are what say "these belong to the comment above" without a label. */
.public-comment-thread-replies[b-wvocx02iwm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-inline-start: var(--space-4);
    padding-inline-start: var(--space-2);
    border-inline-start: 2px solid var(--color-border);
}

.public-comment-thread-expander[b-wvocx02iwm],
.public-comment-thread-reply-start[b-wvocx02iwm],
.public-comment-thread-reply-cancel[b-wvocx02iwm] {
    align-self: flex-start;
    min-height: 44px;
    padding: 0 var(--space-2);
    border: none;
    background: transparent;
    color: var(--color-link);
    font-family: var(--font-base);
    font-size: 13px;
    cursor: pointer;
}

.public-comment-thread-expander:hover[b-wvocx02iwm],
.public-comment-thread-reply-start:hover[b-wvocx02iwm],
.public-comment-thread-reply-cancel:hover[b-wvocx02iwm] {
    text-decoration: underline;
}

@media (pointer: coarse) {
    .public-comment-thread-expander:hover[b-wvocx02iwm],
    .public-comment-thread-reply-start:hover[b-wvocx02iwm],
    .public-comment-thread-reply-cancel:hover[b-wvocx02iwm] {
        text-decoration: none;
    }

    .public-comment-thread-expander:active[b-wvocx02iwm],
    .public-comment-thread-reply-start:active[b-wvocx02iwm],
    .public-comment-thread-reply-cancel:active[b-wvocx02iwm] {
        text-decoration: underline;
    }
}

.public-comment-thread-reply-box[b-wvocx02iwm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-inline-start: var(--space-4);
}

.public-comment-thread-reply-actions[b-wvocx02iwm] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.public-comment-thread-reply-error[b-wvocx02iwm] {
    font-family: var(--font-base);
    font-size: 12px;
    color: var(--color-status-danger-text);
}
/* /Modules/PublicReview/Components/CookieConsentBanner.razor.rz.scp.css */
.public-cookie-banner[b-fgc6bvs9h4] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--color-bg-elevated);
    border-top: 1px solid var(--color-border);
    box-shadow: var(--shadow-elevated);
    z-index: 50;
}

.public-cookie-banner-text[b-fgc6bvs9h4] {
    margin: 0;
    max-width: 640px;
    font-size: 13px;
    color: var(--color-text-secondary);
}

[b-fgc6bvs9h4] .public-cookie-banner-accept {
    --accent-fill-rest: var(--color-brand-header);
    --accent-fill-hover: var(--color-brand-header-hover);
    --accent-fill-active: var(--color-brand-header-hover);
    flex: 0 0 auto;
    min-height: 44px;
}
/* /Modules/PublicReview/Components/DeleteCommentDialog.razor.rz.scp.css */
.public-delete-dialog[b-rq9btck4dt] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 60;
}

.public-delete-dialog-backdrop[b-rq9btck4dt] {
    position: absolute;
    inset: 0;
    background: var(--color-scrim);
}

.public-delete-dialog-card[b-rq9btck4dt] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(90vw, 380px);
    padding: 24px;
    background: var(--color-bg-elevated);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-elevated);
}

.public-delete-dialog-title[b-rq9btck4dt] {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    color: var(--color-text-primary);
}

.public-delete-dialog-message[b-rq9btck4dt] {
    margin: 0;
    font-size: 13px;
    color: var(--color-text-secondary);
}

.public-delete-dialog-actions[b-rq9btck4dt] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

[b-rq9btck4dt] .public-delete-dialog-confirm {
    --accent-fill-rest: var(--color-danger);
    --accent-fill-hover: var(--color-brand-red);
    min-height: 44px;
}

[b-rq9btck4dt] .public-delete-dialog-cancel {
    min-height: 44px;
}
/* /Modules/PublicReview/Components/ErrorNotice.razor.rz.scp.css */
.public-error-notice[b-pj8tj74dag] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: var(--space-4);
}

.public-error-notice-card[b-pj8tj74dag] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: min(90vw, 420px);
    padding: 32px 28px;
    background: var(--color-bg-elevated);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-elevated);
    text-align: center;
}

.public-error-notice-logo[b-pj8tj74dag] {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 20px;
    color: var(--color-brand-header);
    text-decoration: none;
}

.public-error-notice-headline[b-pj8tj74dag] {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    color: var(--color-text-primary);
}

.public-error-notice-message[b-pj8tj74dag] {
    margin: 0;
    font-size: 14px;
    color: var(--color-text-secondary);
}

[b-pj8tj74dag] .public-error-notice-retry {
    --accent-fill-rest: var(--color-brand-header);
    --accent-fill-hover: var(--color-brand-header-hover);
    --accent-fill-active: var(--color-brand-header-hover);
    min-height: 44px;
}
/* /Modules/PublicReview/Components/NameGate.razor.rz.scp.css */
.public-name-gate[b-3sk3fw5352] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: var(--space-4);
}

.public-name-gate-panel[b-3sk3fw5352] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: min(90vw, 420px);
    padding: 32px 28px;
    background: var(--color-bg-elevated);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-elevated);
}

.public-name-gate-title[b-3sk3fw5352] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--color-brand-header);
}

.public-name-gate-intro[b-3sk3fw5352],
.public-name-gate-hint[b-3sk3fw5352] {
    margin: 0;
    font-family: var(--font-base);
    font-size: 14px;
    color: var(--color-text-secondary);
}

.public-name-gate-hint[b-3sk3fw5352] {
    font-size: 12px;
}

.public-name-gate-field[b-3sk3fw5352] {
    width: 100%;
}

.public-name-gate-cancel[b-3sk3fw5352] {
    align-self: center;
    min-height: 44px;
    border: none;
    background: transparent;
    color: var(--color-link);
    font-family: var(--font-base);
    font-size: 13px;
    cursor: pointer;
}

.public-name-gate-cancel:hover[b-3sk3fw5352] {
    text-decoration: underline;
}

@media (pointer: coarse) {
    .public-name-gate-cancel:hover[b-3sk3fw5352] {
        text-decoration: none;
    }

    .public-name-gate-cancel:active[b-3sk3fw5352] {
        text-decoration: underline;
    }
}
/* /Modules/PublicReview/Components/PasswordGate.razor.rz.scp.css */
.public-password-gate[b-22uiwt7cym] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: var(--space-4);
}

.public-password-gate-card[b-22uiwt7cym] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: min(90vw, 380px);
    padding: 32px 28px;
    background: var(--color-bg-elevated);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-elevated);
    text-align: center;
}

.public-password-gate-logo[b-22uiwt7cym] {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 20px;
    color: var(--color-brand-header);
}

.public-password-gate-instruction[b-22uiwt7cym] {
    margin: 0;
    font-size: 14px;
    color: var(--color-text-secondary);
}

.public-password-gate-form[b-22uiwt7cym] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
}

[b-22uiwt7cym] .public-password-gate-field {
    width: 100%;
}

.public-password-gate-error[b-22uiwt7cym] {
    display: block;
    color: var(--color-status-danger-text);
    font-size: 12px;
}

[b-22uiwt7cym] .public-password-gate-submit {
    --accent-fill-rest: var(--color-brand-header);
    --accent-fill-hover: var(--color-brand-header-hover);
    --accent-fill-active: var(--color-brand-header-hover);
    min-height: 44px;
}
/* /Modules/PublicReview/Components/ProjectVideoIndex.razor.rz.scp.css */
.project-video-index[b-w0w25cdou3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4);
    font-family: var(--font-body);
    color: var(--color-text-primary);
}

.project-video-index-head[b-w0w25cdou3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.project-video-index-title[b-w0w25cdou3] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 800;
}

.project-video-index-count[b-w0w25cdou3] {
    margin: 0;
    font-size: 13px;
    color: var(--color-text-secondary);
}

.project-video-index-empty[b-w0w25cdou3] {
    margin: 0;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
}

/* Auto-fill rather than fixed columns: the reviewer's window is not ours to predict, and this collapses to one
   column on a phone without a breakpoint of its own. */
.project-video-index-grid[b-w0w25cdou3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.project-video-index-tile[b-w0w25cdou3] {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-elevated);
    box-shadow: var(--shadow-card);
    text-align: start;
    cursor: pointer;
    transition: box-shadow 0.12s ease, border-color 0.12s ease;
}

.project-video-index-tile:hover[b-w0w25cdou3] {
    border-color: var(--color-brand-header);
    box-shadow: var(--shadow-elevated);
}

/* Touch has no hover, so the same affordance comes from the pressed state. */
@media (pointer: coarse) {
    .project-video-index-tile:hover[b-w0w25cdou3] {
        border-color: var(--color-border);
        box-shadow: var(--shadow-card);
    }

    .project-video-index-tile:active[b-w0w25cdou3] {
        border-color: var(--color-brand-header);
    }
}

.project-video-index-tile:focus-visible[b-w0w25cdou3] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.project-video-index-poster[b-w0w25cdou3] {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--color-brand-stage);
}

.project-video-index-thumbnail[b-w0w25cdou3] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.project-video-index-duration[b-w0w25cdou3] {
    position: absolute;
    inset-block-end: 6px;
    inset-inline-end: 6px;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    background: rgb(0 0 0 / 62%);
    color: var(--color-text-on-brand);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.project-video-index-meta[b-w0w25cdou3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3);
    min-width: 0;
}

.project-video-index-name[b-w0w25cdou3] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
}

.project-video-index-comments[b-w0w25cdou3] {
    font-size: 12px;
    color: var(--color-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
    .project-video-index-tile[b-w0w25cdou3] {
        transition: none;
    }
}
/* /Modules/PublicReview/Components/PublicVideoStage.razor.rz.scp.css */
/* One object: picture, comment timeline, transport bar. The rounding and the shadow belong to the composite,
   the parts inside stay square — see the same comment in VideoStage.razor.css. */
.public-video-stage[b-mm2j5v7lpl] {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-video);
    overflow: hidden;
}

.public-video-stage-frame[b-mm2j5v7lpl] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--color-brand-stage);
    overflow: hidden;
}

.public-video-stage-timeline[b-mm2j5v7lpl] {
    display: flex;
    flex-direction: column;
}

.public-video-stage-element[b-mm2j5v7lpl] {
    width: 100%;
    height: 100%;
    display: block;
    background: var(--color-brand-stage);
}

.public-video-stage-visually-hidden[b-mm2j5v7lpl] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.public-video-stage-error-panel[b-mm2j5v7lpl] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    text-align: center;
    background: var(--color-brand-stage);
    color: var(--color-text-on-stage);
    font-family: var(--font-body);
}

.public-video-stage-error-message[b-mm2j5v7lpl] {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
}

.public-video-stage-retry-button[b-mm2j5v7lpl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 20px;
    margin-top: 6px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--color-brand-header);
    color: var(--color-text-on-brand);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.public-video-stage-retry-button:hover[b-mm2j5v7lpl] {
    background: var(--color-brand-header-hover);
}

.public-video-stage-retry-button:focus-visible[b-mm2j5v7lpl] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .public-video-stage-retry-button[b-mm2j5v7lpl] {
        transition: none;
    }
}
/* /Modules/PublicReview/Components/SidebarFab.razor.rz.scp.css */
.public-sidebar-fab[b-lzuakubqgo] {
    display: none;
    position: fixed;
    right: 16px;
    bottom: 16px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 56px;
    min-height: 56px;
    padding: 0 12px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--color-brand-yellow);
    color: var(--color-brand-yellow-text);
    box-shadow: var(--shadow-elevated);
    cursor: pointer;
    z-index: 40;
}

.public-sidebar-fab:focus-visible[b-lzuakubqgo] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.public-sidebar-fab--raised[b-lzuakubqgo] {
    bottom: 96px;
}

.public-sidebar-fab-count[b-lzuakubqgo] {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 1023px), (max-height: 540px) and (orientation: landscape) {
    .public-sidebar-fab[b-lzuakubqgo] {
        display: inline-flex;
    }
}
/* /Modules/PublicReview/Components/Timeline.razor.rz.scp.css */
.public-timeline[b-5uetaww8lp] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 16px;
    background: var(--color-brand-stage);
    font-family: var(--font-body);
}

.public-timeline-track[b-5uetaww8lp] {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-height: 24px;
}

.public-timeline-scrubber[b-5uetaww8lp] {
    width: 100%;
    height: 24px;
    margin: 0;
    appearance: none;
    background: transparent;
    accent-color: var(--color-accent);
    cursor: pointer;
}

.public-timeline-scrubber[b-5uetaww8lp]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--color-on-stage-divider);
}

.public-timeline-scrubber[b-5uetaww8lp]::-moz-range-track {
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--color-on-stage-divider);
}

.public-timeline-scrubber:focus-visible[b-5uetaww8lp] {
    outline: 2px solid var(--color-text-on-stage);
    outline-offset: 2px;
}

.public-timeline-scrubber:disabled[b-5uetaww8lp] {
    opacity: 0.4;
    cursor: default;
}

.public-timeline-markers[b-5uetaww8lp] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.public-timeline-marker[b-5uetaww8lp] {
    position: absolute;
    top: 50%;
    left: var(--marker-position);
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    padding: 0;
    border: 2px solid var(--color-text-on-stage);
    border-radius: 50%;
    background: var(--color-brand-yellow);
    cursor: pointer;
    pointer-events: auto;
}

.public-timeline-marker--high[b-5uetaww8lp] {
    background: var(--color-brand-red);
}

.public-timeline-marker--active[b-5uetaww8lp] {
    box-shadow: 0 0 0 3px var(--color-text-on-stage);
}

.public-timeline-marker:focus-visible[b-5uetaww8lp] {
    outline: 2px solid var(--color-text-on-stage);
    outline-offset: 2px;
}

@media (pointer: coarse) {
    .public-timeline-track[b-5uetaww8lp] {
        min-height: 44px;
    }

    .public-timeline-scrubber[b-5uetaww8lp] {
        height: 44px;
    }

    .public-timeline-marker[b-5uetaww8lp] {
        width: 18px;
        height: 18px;
        margin: -9px 0 0 -9px;
    }
}

@media (max-width: 640px) {
    .public-timeline[b-5uetaww8lp] {
        padding: 6px 12px;
    }

    .public-timeline-track[b-5uetaww8lp] {
        min-height: 16px;
    }

    .public-timeline-scrubber[b-5uetaww8lp] {
        height: 16px;
    }
}
/* /Modules/PublicReview/Layout/PublicReviewLayout.razor.rz.scp.css */
.public-layout[b-gmfwaylwef] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background-color: var(--color-brand-stage);
    color: var(--color-text-on-brand);
}
/* /Modules/PublicReview/Pages/PublicReviewPage.razor.rz.scp.css */
/*
  A fixed viewport height, not a minimum. With `min-height` the shell's grid row grew to whatever the comment
  list needed and the whole document scrolled — which carries the video and the timeline off screen, the two
  things the comments are being read against. Bounded here, the panel scrolls inside itself instead.
*/
.public-review[b-38fxix742z] {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
}

.public-overlay-root[b-38fxix742z] {
    display: contents;
}

.public-review-header[b-38fxix742z] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    background: var(--color-brand-header);
    color: var(--color-text-on-brand);
}

/* Takes the logo's place inside a video of a project link: a reviewer has no side menu, so this is the only
   way back to the list that is not the browser's own button. */
.public-review-back[b-38fxix742z] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 36px;
    padding: 0 var(--space-3) 0 var(--space-2);
    border: 1px solid var(--color-on-stage-border);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-on-brand);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.public-review-back:hover[b-38fxix742z] {
    background: var(--color-on-stage-tint);
}

@media (pointer: coarse) {
    .public-review-back[b-38fxix742z] {
        min-height: 44px;
    }

    .public-review-back:hover[b-38fxix742z] {
        background: transparent;
    }

    .public-review-back:active[b-38fxix742z] {
        background: var(--color-on-stage-tint);
    }
}

.public-review-back:focus-visible[b-38fxix742z] {
    outline: 2px solid var(--color-brand-yellow);
    outline-offset: 2px;
}

.public-review-back-label[b-38fxix742z] {
    max-width: 40vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .public-review-back[b-38fxix742z] {
        transition: none;
    }
}

.public-review-logo[b-38fxix742z] {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 18px;
    color: var(--color-text-on-brand);
    text-decoration: none;
}

.public-review-display-name[b-38fxix742z] {
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.16);
    font-size: 12px;
    font-weight: 600;
}

.public-review-loading[b-38fxix742z] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    flex: 1 1 auto;
    padding: var(--space-4);
}

.public-review-loading-stage[b-38fxix742z] {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    background: linear-gradient(90deg, var(--color-brand-stage) 25%, var(--color-on-stage-tint) 50%, var(--color-brand-stage) 75%);
    background-size: 200% 100%;
    animation: public-review-loading-shimmer-b-38fxix742z 1.4s ease infinite;
}

.public-review-loading-cards[b-38fxix742z] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.public-review-loading-card[b-38fxix742z] {
    height: 64px;
    border-radius: var(--radius-md);
    background: linear-gradient(90deg, var(--color-bg-surface-alt) 25%, var(--color-bg-hover) 50%, var(--color-bg-surface-alt) 75%);
    background-size: 200% 100%;
    animation: public-review-loading-shimmer-b-38fxix742z 1.4s ease infinite;
}

@keyframes public-review-loading-shimmer-b-38fxix742z {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

.public-review-visually-hidden[b-38fxix742z] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.public-review-alert[b-38fxix742z] {
    margin: 0 var(--space-4);
    padding: 10px 14px;
    border-radius: var(--radius-md);
    background: var(--color-status-danger-bg);
    color: var(--color-status-danger-text);
    font-size: 13px;
}

.public-review-shell[b-38fxix742z] {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.public-review-shell-main[b-38fxix742z] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-4);
}

.public-review-shell-backdrop[b-38fxix742z] {
    display: none;
}

.public-review-shell-sidebar[b-38fxix742z] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;

    /*
      Keeps the panel's own content out of the viewport's bottom-right corner, where the help button is fixed.
      Without it the button sits on the composer's submit and swallows the click. Sized from the button's token
      so the two cannot drift apart.
    */
    padding-block-end: calc(var(--help-trigger-size) + var(--space-4));

    /* The list scrolls here, inside the panel, and not by taking the page with it. */
    overflow-y: auto;
    background: var(--color-bg-elevated);
    border-left: 1px solid var(--color-border);
    outline: none;
}

.public-review-sidebar-close[b-38fxix742z] {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    z-index: 1;
}

.public-review-sidebar-close:hover[b-38fxix742z] {
    background: var(--color-bg-hover);
}

.public-review-sidebar-close:focus-visible[b-38fxix742z] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

/*
  The close button belongs to this page and the sidebar's own header to the component inside it, and both put
  something in the same top-right corner — so on a phone the link's display name sat underneath the button.
  Neither side can see the other, and the one that knows a button is floating there is this one, which is why the
  room is reserved from here rather than baked into the component.

  Keyed on the dialog role, not on a width: the role and the button are rendered from the same condition, so this
  cannot drift out of step with whether there is anything to make room for. Wide enough for the button's 44px plus
  its 8px offset and a gap, so the text stops beside it rather than against it.
*/
.public-review-shell-sidebar[role="dialog"][b-38fxix742z]  .public-comment-sidebar-header {
    padding-inline-end: 60px;
}

@media (min-width: 1024px) {
    .public-review-shell[b-38fxix742z] {
        grid-template-columns: 1fr 380px;
    }
}

@media (max-width: 1023px) {
    .public-review-shell-sidebar[b-38fxix742z] {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(380px, 100%);
        z-index: 30;
        box-shadow: var(--shadow-elevated);
        transform: translateX(100%);
        transition: transform 0.2s ease;
    }

    .public-review-shell--sidebar-open .public-review-shell-sidebar[b-38fxix742z] {
        transform: translateX(0);
    }

    .public-review-shell--sidebar-open .public-review-shell-backdrop[b-38fxix742z] {
        display: block;
        position: fixed;
        inset: 0;
        background: var(--color-scrim);
        z-index: 20;
    }
}

@media (max-width: 640px) {
    .public-review-shell-sidebar[b-38fxix742z] {
        inset: auto 0 0 0;
        width: auto;
        max-height: 80dvh;
        border-left: none;
        border-top: 1px solid var(--color-border);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        transform: translateY(100%);
    }

    .public-review-shell--sidebar-open .public-review-shell-sidebar[b-38fxix742z] {
        transform: translateY(0);
    }
}

@media (max-height: 540px) and (orientation: landscape) {
    .public-review-shell-sidebar[b-38fxix742z] {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(320px, 70vw);
        max-height: none;
        border-radius: 0;
        border-top: none;
        border-left: 1px solid var(--color-border);
        transform: translateX(100%);
        z-index: 30;
    }

    .public-review-shell--sidebar-open .public-review-shell-sidebar[b-38fxix742z] {
        transform: translateX(0);
    }

    .public-review-shell--sidebar-open .public-review-shell-backdrop[b-38fxix742z] {
        display: block;
        position: fixed;
        inset: 0;
        background: var(--color-scrim);
        z-index: 20;
    }
}

@media (prefers-reduced-motion: reduce) {
    .public-review-shell-sidebar[b-38fxix742z] {
        transition: none;
    }

    .public-review-loading-stage[b-38fxix742z],
    .public-review-loading-card[b-38fxix742z] {
        animation: none;
    }
}

/*
  Pushed to the far end rather than left to sit against the logo. Nothing in the header did that, so the
  reviewer's name pill had always been clustered beside the wordmark with the whole bar empty to its right —
  invisible as a defect until the help trigger joined it and made the cluster three controls wide. The app
  shell puts the same group of controls at the trailing edge, and this bar is standing in for it.
*/
.public-review-header-end[b-38fxix742z] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-inline-start: auto;
}

/* Where a signed-in user finds their profile; for an anonymous reviewer it holds the one thing they own. */
.public-review-identity[b-38fxix742z] {
    min-height: 44px;
    padding: 0 var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: transparent;
    color: inherit;
    font-family: var(--font-base);
    font-size: 13px;
    cursor: pointer;
}

.public-review-identity:hover[b-38fxix742z] {
    background: var(--color-bg-hover);
}

@media (pointer: coarse) {
    .public-review-identity:hover[b-38fxix742z] {
        background: transparent;
    }

    .public-review-identity:active[b-38fxix742z] {
        background: var(--color-bg-hover);
    }
}

/*
  The player stays mounted while the drawing editor is on the stage — hidden, not removed. Unmounting it would
  drop the playhead and the loaded buffer, so closing the editor would restart the video.
*/
.public-review-stage-player.is-hidden[b-38fxix742z] {
    display: none;
}

/* Over the picture at the same size, because it *is* the picture: the frame the mark was drawn on. */
.public-review-stage-annotation[b-38fxix742z] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}
/* /Modules/Settings/Pages/Settings.razor.rz.scp.css */
.settings-page[b-kmzaz8w5nl] {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 820px;
    padding: 28px 32px;
    font-family: var(--font-body);
    color: var(--color-text-primary);
}

.settings-page-header[b-kmzaz8w5nl] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.settings-page-title[b-kmzaz8w5nl] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--color-text-primary);
}

.settings-page-subtitle[b-kmzaz8w5nl] {
    font-size: 14px;
    color: var(--color-text-muted);
    margin: 0;
}

.settings-card[b-kmzaz8w5nl] {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.settings-card-header[b-kmzaz8w5nl] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 22px 12px;
    border-bottom: 1px solid var(--color-border);
}

.settings-card-title[b-kmzaz8w5nl] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    margin: 0;
    color: var(--color-text-primary);
}

.settings-card-meta[b-kmzaz8w5nl] {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 4px 0 0;
}

.settings-card-body[b-kmzaz8w5nl] {
    padding: 18px 22px;
}

.settings-card-body-flush[b-kmzaz8w5nl] {
    padding: 0;
}

.settings-card-footer[b-kmzaz8w5nl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 22px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-surface-alt);
}

.settings-card-footer-caption[b-kmzaz8w5nl] {
    font-size: 12px;
    color: var(--color-text-muted);
}

.settings-badge[b-kmzaz8w5nl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
}

.settings-badge-success[b-kmzaz8w5nl] {
    background: var(--color-status-success-bg);
    color: var(--color-status-success-text);
}

.settings-badge-warning[b-kmzaz8w5nl] {
    background: var(--color-status-warning-bg);
    color: var(--color-status-warning-text);
}

.settings-badge-dot[b-kmzaz8w5nl] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.settings-stub-overlay[b-kmzaz8w5nl] {
    opacity: 0.55;
    pointer-events: none;
    filter: saturate(0.8);
}

.settings-theme-grid[b-kmzaz8w5nl] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.settings-theme-card[b-kmzaz8w5nl] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    background: var(--color-bg-elevated);
    transition: border-color 120ms, box-shadow 120ms;
}

.settings-theme-card:hover[b-kmzaz8w5nl] {
    border-color: var(--color-border-strong);
}

.settings-theme-card.active[b-kmzaz8w5nl] {
    border-color: var(--color-brand-header);
    box-shadow: 0 0 0 2px var(--color-brand-header) inset;
}

.settings-theme-card input[type="radio"][b-kmzaz8w5nl] {
    accent-color: var(--color-brand-header);
}

.settings-theme-swatch[b-kmzaz8w5nl] {
    display: inline-block;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    flex: 0 0 auto;
    background: var(--theme-swatch);
}

.settings-theme-text[b-kmzaz8w5nl] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.settings-theme-label[b-kmzaz8w5nl] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
}

.settings-theme-sub[b-kmzaz8w5nl] {
    font-size: 12px;
    color: var(--color-text-muted);
}

.settings-field-label[b-kmzaz8w5nl] {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-bottom: 6px;
    margin-top: 14px;
}

.settings-field-label:first-child[b-kmzaz8w5nl] {
    margin-top: 0;
}

.settings-table[b-kmzaz8w5nl] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.settings-table th[b-kmzaz8w5nl],
.settings-table td[b-kmzaz8w5nl] {
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: middle;
}

.settings-table th[b-kmzaz8w5nl] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
    color: var(--color-text-muted);
    background: var(--color-bg-surface-alt);
}

.settings-table tbody tr:last-child td[b-kmzaz8w5nl] {
    border-bottom: none;
}

.settings-col-center[b-kmzaz8w5nl] {
    text-align: center;
}

.settings-event-name[b-kmzaz8w5nl] {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--color-text-primary);
}

.settings-event-sub[b-kmzaz8w5nl] {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.settings-event-na[b-kmzaz8w5nl] {
    color: var(--color-text-muted);
}

.settings-toggle[b-kmzaz8w5nl] {
    accent-color: var(--color-brand-header);
}

.settings-language-row[b-kmzaz8w5nl] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 320px;
}

.settings-badge-neutral[b-kmzaz8w5nl] {
    background: var(--color-bg-surface-alt);
    color: var(--color-text-muted);
}

.settings-badge-danger[b-kmzaz8w5nl] {
    background: var(--color-status-danger-bg);
    color: var(--color-status-danger-text);
}

.settings-drive-details[b-kmzaz8w5nl] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.settings-drive-row[b-kmzaz8w5nl] {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.settings-drive-label[b-kmzaz8w5nl] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
    color: var(--color-text-secondary);
    min-width: 120px;
    flex: 0 0 auto;
}

.settings-drive-value[b-kmzaz8w5nl] {
    font-size: 13px;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.settings-drive-quota[b-kmzaz8w5nl] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.settings-drive-quota-head[b-kmzaz8w5nl] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.settings-drive-quota-caption[b-kmzaz8w5nl] {
    font-size: 12px;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.settings-drive-quota-track[b-kmzaz8w5nl] {
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--color-bg-surface-alt);
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.settings-drive-quota-fill[b-kmzaz8w5nl] {
    height: 100%;
    width: var(--drive-quota-fill, 0%);
    background: var(--color-brand-header);
    border-radius: var(--radius-pill);
    transition: width 400ms ease;
}

.settings-drive-quota-fill.is-warning[b-kmzaz8w5nl] {
    background: var(--color-status-warning-text);
}

.settings-drive-quota-fill.is-critical[b-kmzaz8w5nl] {
    background: var(--color-status-danger-text);
}

.settings-drive-notice[b-kmzaz8w5nl] {
    margin: 0;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    border: 1px solid;
    font-size: 13px;
    line-height: 1.5;
}

.settings-drive-notice--warning[b-kmzaz8w5nl] {
    background: var(--color-status-warning-bg);
    border-color: var(--color-status-warning-text);
    color: var(--color-status-warning-text);
}

.settings-drive-notice--error[b-kmzaz8w5nl] {
    background: var(--color-status-danger-bg);
    border-color: var(--color-status-danger-text);
    color: var(--color-status-danger-text);
}

.settings-skeleton-line[b-kmzaz8w5nl] {
    height: 14px;
    border-radius: var(--radius-sm);
    background: linear-gradient(
        90deg,
        var(--color-bg-surface-alt) 25%,
        var(--color-border) 50%,
        var(--color-bg-surface-alt) 75%
    );
    background-size: 200% 100%;
    animation: settings-shimmer-b-kmzaz8w5nl 1.4s ease infinite;
    margin-bottom: 10px;
}

.settings-skeleton-line:last-child[b-kmzaz8w5nl] {
    width: 60%;
    margin-bottom: 0;
}

@keyframes settings-shimmer-b-kmzaz8w5nl {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

[b-kmzaz8w5nl] .danger-button {
    --accent-fill-rest: var(--color-status-danger-text);
    --accent-fill-hover: var(--color-brand-red);
}

.settings-card-footer--drive[b-kmzaz8w5nl] {
    justify-content: flex-end;
    gap: 10px;
}

@media (prefers-reduced-motion: reduce) {
    .settings-skeleton-line[b-kmzaz8w5nl] {
        animation: none;
    }

    .settings-drive-quota-fill[b-kmzaz8w5nl] {
        transition: none;
    }
}

@media (max-width: 640px) {
    .settings-card-header[b-kmzaz8w5nl] {
        flex-wrap: wrap;
    }

    .settings-card-footer[b-kmzaz8w5nl] {
        flex-direction: column;
    }

    [b-kmzaz8w5nl] .drive-action {
        width: 100%;
        min-height: 44px;
    }
}
/* /Modules/Setup/Layout/SetupLayout.razor.rz.scp.css */
.setup-layout[b-9d2sloa7ac] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background: var(--color-bg-surface-alt);
    color: var(--color-text-primary);
    font-family: var(--font-body);
}

.setup-layout-header[b-9d2sloa7ac] {
    display: flex;
    align-items: center;
    /* The brand on the left, the help button on the right — nothing else lives up here. */
    justify-content: space-between;
    height: 56px;
    padding: 0 var(--space-4);
    background: var(--color-brand-header);
    color: var(--color-text-on-brand);
}

.setup-layout-brand[b-9d2sloa7ac] {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.setup-layout-main[b-9d2sloa7ac] {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 20px;
}

@media (max-width: 640px) {
    .setup-layout-main[b-9d2sloa7ac] {
        padding: 20px 12px;
    }
}
/* /Modules/Setup/Pages/SetupWizard.razor.rz.scp.css */
.setup-card[b-g7uw5tpqvq] {
    width: 100%;
    max-width: 620px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-elevated);
    overflow: hidden;
}

.setup-steps[b-g7uw5tpqvq] {
    display: flex;
    gap: var(--space-2);
    margin: 0;
    padding: 16px 24px;
    list-style: none;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-surface-alt);
}

.setup-step[b-g7uw5tpqvq] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    font-size: 13px;
}

.setup-step-marker[b-g7uw5tpqvq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border-strong);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-muted);
}

.setup-step-label[b-g7uw5tpqvq] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text-muted);
}

.setup-step.is-current .setup-step-marker[b-g7uw5tpqvq] {
    background: var(--color-brand-header);
    border-color: var(--color-brand-header);
    color: var(--color-text-on-brand);
}

.setup-step.is-current .setup-step-label[b-g7uw5tpqvq] {
    color: var(--color-text-primary);
    font-weight: 600;
}

.setup-step.is-done .setup-step-marker[b-g7uw5tpqvq] {
    background: var(--color-status-success-bg);
    border-color: var(--color-status-success-text);
    color: var(--color-status-success-text);
}

/* Passed over, not completed — must not read as done next to a warning saying it is pending. */
.setup-step.is-skipped .setup-step-marker[b-g7uw5tpqvq] {
    background: var(--color-status-warning-bg);
    border-color: var(--color-status-warning-text);
    color: var(--color-status-warning-text);
}

.setup-skeleton[b-g7uw5tpqvq] {
    height: 220px;
    margin: 24px;
    border-radius: var(--radius-md);
    background: var(--color-bg-surface-alt);
}

.setup-body[b-g7uw5tpqvq] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px 24px 8px;
}

.setup-title[b-g7uw5tpqvq] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.25;
    margin: 0;
}

.setup-lead[b-g7uw5tpqvq] {
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    color: var(--color-text-secondary);
}

.setup-note[b-g7uw5tpqvq] {
    font-size: 13px;
    line-height: 1.55;
    margin: 0;
    color: var(--color-text-muted);
}

.setup-field[b-g7uw5tpqvq] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.setup-label[b-g7uw5tpqvq] {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.setup-input[b-g7uw5tpqvq] {
    width: 100%;
}

.setup-guide[b-g7uw5tpqvq] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.55;
}

.setup-link[b-g7uw5tpqvq] {
    display: inline-block;
    margin-left: 4px;
    color: var(--color-link);
    font-weight: 600;
    text-decoration: underline;
}

.setup-copy-row[b-g7uw5tpqvq] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.setup-code[b-g7uw5tpqvq] {
    flex: 1 1 280px;
    min-width: 0;
    overflow-x: auto;
    white-space: nowrap;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-surface-alt);
    font-family: var(--font-monospace);
    font-size: 13px;
}

.setup-notice[b-g7uw5tpqvq] {
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-left-width: 4px;
    border-radius: var(--radius-md);
    font-size: 13px;
    line-height: 1.55;
}

.setup-notice--warning[b-g7uw5tpqvq] {
    border-left-color: var(--color-status-warning-text);
    background: var(--color-status-warning-bg);
    color: var(--color-status-warning-text);
}

.setup-notice--error[b-g7uw5tpqvq] {
    border-left-color: var(--color-status-danger-text);
    background: var(--color-status-danger-bg);
    color: var(--color-status-danger-text);
}

.setup-summary[b-g7uw5tpqvq] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.setup-summary-item[b-g7uw5tpqvq] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: var(--color-bg-surface-alt);
    font-size: 14px;
    line-height: 1.5;
}

.setup-summary-item[b-g7uw5tpqvq]::before {
    flex: 0 0 auto;
    font-weight: 700;
}

.setup-summary-item--done[b-g7uw5tpqvq]::before {
    content: "✓";
    color: var(--color-status-success-text);
}

.setup-summary-item--pending[b-g7uw5tpqvq]::before {
    content: "!";
    color: var(--color-status-warning-text);
}

.setup-footer[b-g7uw5tpqvq] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 18px 24px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-surface-alt);
}

@media (max-width: 640px) {
    .setup-steps[b-g7uw5tpqvq] {
        padding: 14px 16px;
    }

    .setup-step-label[b-g7uw5tpqvq] {
        display: none;
    }

    .setup-step[b-g7uw5tpqvq] {
        flex: 0 0 auto;
    }

    .setup-body[b-g7uw5tpqvq],
    .setup-footer[b-g7uw5tpqvq] {
        padding-left: 16px;
        padding-right: 16px;
    }

    .setup-footer[b-g7uw5tpqvq] {
        flex-direction: column-reverse;
    }

    .setup-footer[b-g7uw5tpqvq]  .fluent-button {
        width: 100%;
    }
}
/* /Modules/ShareLinks/Components/CreateShareLinkDrawer.razor.rz.scp.css */
.create-share-link-drawer-root[b-q8l1rap14e] {
    display: contents;
}

[b-q8l1rap14e] .create-share-link-drawer {
    --dialog-width: min(420px, 100vw);
    position: fixed;
    inset: 0 0 0 auto;
    margin: 0;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
}

.create-share-link-form[b-q8l1rap14e],
.create-share-link-success[b-q8l1rap14e] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.create-share-link-status-announcement[b-q8l1rap14e] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

[b-q8l1rap14e] .create-share-link-video-select,
[b-q8l1rap14e] .create-share-link-display-name-field,
[b-q8l1rap14e] .create-share-link-expiry-field,
[b-q8l1rap14e] .create-share-link-password-field,
[b-q8l1rap14e] .create-share-link-url-field {
    width: 100%;
}

[b-q8l1rap14e] .create-share-link-url-field {
    font-family: var(--font-monospace);
}

.create-share-link-project-hint[b-q8l1rap14e] {
    margin: 0;
    font-size: 12px;
    color: var(--color-text-secondary);
}

.create-share-link-preset-video[b-q8l1rap14e] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.create-share-link-preset-video-label[b-q8l1rap14e] {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-text-muted);
}

.create-share-link-preset-video-chip[b-q8l1rap14e] {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    width: fit-content;
    border-radius: var(--radius-md);
    background: var(--color-bg-surface-alt);
    border: 1px solid var(--color-border);
    font-size: 13px;
    color: var(--color-text-primary);
}

.create-share-link-expiry-hint[b-q8l1rap14e] {
    margin: -6px 0 0;
    font-size: 12px;
    color: var(--color-text-muted);
}

.create-share-link-validation-error[b-q8l1rap14e] {
    display: block;
    color: var(--color-status-danger-text);
    font-size: 12px;
}

.create-share-link-qr-frame[b-q8l1rap14e] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    padding: 16px;
    background: var(--color-qr-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

/* Inside the panel it saves. In a shared action row nothing said which of the buttons the code belonged to. */
.create-share-link-qr-download[b-q8l1rap14e] {
    position: absolute;
    inset-block-end: 8px;
    inset-inline-end: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    cursor: pointer;
}

.create-share-link-qr-download:hover[b-q8l1rap14e] {
    background: var(--color-bg-hover);
    color: var(--color-brand-header);
}

@media (pointer: coarse) {
    .create-share-link-qr-download:hover[b-q8l1rap14e] {
        background: var(--color-bg-elevated);
        color: var(--color-text-secondary);
    }

    .create-share-link-qr-download:active[b-q8l1rap14e] {
        background: var(--color-bg-hover);
    }
}

.create-share-link-qr-download:focus-visible[b-q8l1rap14e] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.create-share-link-url-block[b-q8l1rap14e] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.create-share-link-url-label[b-q8l1rap14e] {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

/* The field and the button that copies it, on one line. */
.create-share-link-url-row[b-q8l1rap14e] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.create-share-link-url-row[b-q8l1rap14e]  .create-share-link-url-field {
    flex: 1 1 auto;
    min-width: 0;
}

/* Below the compact breakpoint the label goes so the row still fits on one line — the icon and the tooltip
   carry it from there. */
@media (max-width: 480px) {
    .create-share-link-copy-label[b-q8l1rap14e] {
        display: none;
    }
}

.create-share-link-qr-image[b-q8l1rap14e] {
    width: 180px;
    height: 180px;
}

.create-share-link-qr-skeleton[b-q8l1rap14e] {
    width: 180px;
    height: 180px;
    border-radius: var(--radius-md);
    background: linear-gradient(90deg, var(--color-bg-surface-alt) 25%, var(--color-bg-hover) 50%, var(--color-bg-surface-alt) 75%);
    background-size: 200% 100%;
    animation: create-share-link-qr-shimmer-b-q8l1rap14e 1.4s ease infinite;
}

@keyframes create-share-link-qr-shimmer-b-q8l1rap14e {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .create-share-link-qr-skeleton[b-q8l1rap14e] {
        animation: none;
    }
}

.create-share-link-qr-error[b-q8l1rap14e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    color: var(--color-text-secondary);
}

.create-share-link-success-chips[b-q8l1rap14e] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.create-share-link-expiry-chip[b-q8l1rap14e] {
    font-size: 12px;
    color: var(--color-text-muted);
}

.create-share-link-success-actions[b-q8l1rap14e] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

[b-q8l1rap14e] .primary-action {
    --accent-fill-rest: var(--color-brand-header);
    --accent-fill-hover: var(--color-brand-header-hover);
    --accent-fill-active: var(--color-brand-header-hover);
}

@media (max-width: 640px) {
    [b-q8l1rap14e] .create-share-link-drawer {
        --dialog-width: 100vw;
        inset: auto 0 0 0;
        height: auto;
        max-height: 90dvh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
}

@media (max-height: 540px) and (orientation: landscape) {
    [b-q8l1rap14e] .create-share-link-drawer {
        height: auto;
        max-height: 90dvh;
        overflow-y: auto;
    }
}
/* /Modules/ShareLinks/Components/ShareLinkAuditDialog.razor.rz.scp.css */
.share-link-audit-dialog-root[b-83hz64lvl3] {
    display: contents;
}

[b-83hz64lvl3] .share-link-audit-dialog {
    --dialog-width: min(90vw, 480px);
}

.share-link-audit-subtitle[b-83hz64lvl3] {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--color-text-muted);
}

.share-link-audit-loading[b-83hz64lvl3],
.share-link-audit-empty[b-83hz64lvl3] {
    padding: 32px 16px;
    text-align: center;
    color: var(--color-text-muted);
}

.share-link-audit-error[b-83hz64lvl3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 24px 16px;
    text-align: center;
    color: var(--color-text-secondary);
}

.share-link-audit-list[b-83hz64lvl3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 50vh;
    overflow-y: auto;
}

.share-link-audit-entry[b-83hz64lvl3] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: var(--color-bg-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.share-link-audit-entry-row[b-83hz64lvl3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.share-link-audit-entry-time[b-83hz64lvl3] {
    color: var(--color-text-secondary);
    font-weight: 500;
}

.share-link-audit-entry-meta[b-83hz64lvl3] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
    font-family: var(--font-monospace);
    color: var(--color-text-muted);
}

.share-link-audit-entry-agent[b-83hz64lvl3] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 260px;
}

@media (max-width: 640px) {
    [b-83hz64lvl3] .share-link-audit-dialog {
        --dialog-width: 100vw;
        position: fixed;
        inset: auto 0 0 0;
        margin: 0;
        max-height: 85dvh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    .share-link-audit-entry-agent[b-83hz64lvl3] {
        max-width: 160px;
    }
}

@media (max-height: 540px) and (orientation: landscape) {
    [b-83hz64lvl3] .share-link-audit-dialog {
        max-height: 90dvh;
        overflow-y: auto;
    }
}
/* /Modules/ShareLinks/Components/ShareLinkMailDialog.razor.rz.scp.css */
.share-link-mail-dialog-root[b-vkfwv3ekfw] {
    display: contents;
}

[b-vkfwv3ekfw] .share-link-mail-dialog {
    --dialog-width: min(90vw, 440px);
}

.share-link-mail-form[b-vkfwv3ekfw] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

[b-vkfwv3ekfw] .share-link-mail-recipient-field,
[b-vkfwv3ekfw] .share-link-mail-message-field {
    width: 100%;
}

.share-link-mail-validation-error[b-vkfwv3ekfw] {
    display: block;
    margin-top: -6px;
    color: var(--color-status-danger-text);
    font-size: 12px;
}

.share-link-mail-preview[b-vkfwv3ekfw] {
    padding: 10px 12px;
    background: var(--color-bg-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 13px;
    color: var(--color-text-secondary);
}

.share-link-mail-preview-heading[b-vkfwv3ekfw] {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-text-muted);
}

.share-link-mail-preview-link[b-vkfwv3ekfw] {
    font-family: var(--font-monospace);
    font-size: 12px;
    word-break: break-all;
}

[b-vkfwv3ekfw] .primary-action {
    --accent-fill-rest: var(--color-brand-header);
    --accent-fill-hover: var(--color-brand-header-hover);
    --accent-fill-active: var(--color-brand-header-hover);
}

@media (max-width: 640px) {
    [b-vkfwv3ekfw] .share-link-mail-dialog {
        --dialog-width: 100vw;
        position: fixed;
        inset: auto 0 0 0;
        margin: 0;
        max-height: 85dvh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
}

@media (max-height: 540px) and (orientation: landscape) {
    [b-vkfwv3ekfw] .share-link-mail-dialog {
        max-height: 90dvh;
        overflow-y: auto;
    }
}
/* /Modules/ShareLinks/Components/ShareLinkMenu.razor.rz.scp.css */
.share-link-menu[b-ryvg4qb2vg] {
    display: contents;
}

[b-ryvg4qb2vg] .share-link-menu-danger-item {
    color: var(--color-status-danger-text);
}
/* /Modules/ShareLinks/Components/ShareLinkQrDialog.razor.rz.scp.css */
.share-link-qr-dialog-root[b-3whsadoi51] {
    display: contents;
}

[b-3whsadoi51] .share-link-qr-dialog {
    --dialog-width: min(90vw, 380px);
}

.share-link-qr-tile[b-3whsadoi51] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    padding: 20px;
    background: var(--color-qr-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.share-link-qr-image[b-3whsadoi51] {
    width: 220px;
    height: 220px;
}

.share-link-qr-skeleton[b-3whsadoi51] {
    width: 220px;
    height: 220px;
    border-radius: var(--radius-md);
    background: linear-gradient(90deg, var(--color-bg-surface-alt) 25%, var(--color-bg-hover) 50%, var(--color-bg-surface-alt) 75%);
    background-size: 200% 100%;
    animation: share-link-qr-shimmer-b-3whsadoi51 1.4s ease infinite;
}

@keyframes share-link-qr-shimmer-b-3whsadoi51 {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .share-link-qr-skeleton[b-3whsadoi51] {
        animation: none;
    }
}

.share-link-qr-error[b-3whsadoi51] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    color: var(--color-text-secondary);
}

[b-3whsadoi51] .primary-action {
    --accent-fill-rest: var(--color-brand-header);
    --accent-fill-hover: var(--color-brand-header-hover);
    --accent-fill-active: var(--color-brand-header-hover);
}

@media (max-width: 640px) {
    [b-3whsadoi51] .share-link-qr-dialog {
        --dialog-width: 100vw;
        position: fixed;
        inset: auto 0 0 0;
        margin: 0;
        max-height: 85dvh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
}

@media (max-height: 540px) and (orientation: landscape) {
    [b-3whsadoi51] .share-link-qr-dialog {
        max-height: 90dvh;
        overflow-y: auto;
    }
}
/* /Modules/ShareLinks/Components/ShareLinkStatusBadge.razor.rz.scp.css */
.share-link-status-badge[b-p3e5uxn4rs] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.share-link-status-badge--active[b-p3e5uxn4rs] {
    background: var(--color-brand-header);
    color: var(--color-text-on-brand);
}

.share-link-status-badge--expired[b-p3e5uxn4rs] {
    background: var(--color-status-danger-bg);
    color: var(--color-status-danger-text);
}

.share-link-status-badge--revoked[b-p3e5uxn4rs] {
    background: var(--color-bg-surface-alt);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

[b-p3e5uxn4rs] .share-link-status-badge-lock {
    display: inline-flex;
    padding: 2px;
    border-radius: var(--radius-pill);
    background: var(--color-brand-yellow);
    color: var(--color-brand-yellow-text);
}

.sharelinks-visually-hidden[b-p3e5uxn4rs] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* /Modules/ShareLinks/Components/ShareLinkTokenChip.razor.rz.scp.css */
.share-link-token-chip[b-bdiw7f6zx6] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 4px 8px;
    border-radius: var(--radius-md);
    background: var(--color-bg-surface-alt);
    border: 1px solid var(--color-border);
}

.share-link-token-chip-value[b-bdiw7f6zx6] {
    max-width: 180px;
    overflow: hidden;
    font-family: var(--font-monospace);
    font-size: 12px;
    color: var(--color-text-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.share-link-token-chip-button[b-bdiw7f6zx6] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: var(--radius-pill);
    background: none;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.share-link-token-chip-button:hover[b-bdiw7f6zx6] {
    background: var(--color-bg-hover);
}

.share-link-token-chip-button:focus-visible[b-bdiw7f6zx6] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

@media (pointer: coarse) {
    .share-link-token-chip-button[b-bdiw7f6zx6] {
        width: 44px;
        height: 44px;
    }
}
/* /Modules/ShareLinks/Pages/ShareLinks.razor.rz.scp.css */
.sharelinks-page[b-i062lwsm4r] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px 28px;
    font-family: var(--font-body);
    color: var(--color-text-primary);
}

.sharelinks-header[b-i062lwsm4r] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sharelinks-header-row[b-i062lwsm4r] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.sharelinks-header-title[b-i062lwsm4r] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    color: var(--color-text-primary);
}

.sharelinks-header-subtitle[b-i062lwsm4r] {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--color-text-secondary);
}

[b-i062lwsm4r] .sharelinks-project-select {
    max-width: 320px;
}

[b-i062lwsm4r] .primary-action {
    --accent-fill-rest: var(--color-brand-header);
    --accent-fill-hover: var(--color-brand-header-hover);
    --accent-fill-active: var(--color-brand-header-hover);
}

[b-i062lwsm4r] .danger-button {
    --accent-fill-rest: var(--color-brand-red);
    --accent-fill-hover: var(--color-brand-red);
    --accent-fill-active: var(--color-brand-red);
}

.sharelinks-visually-hidden[b-i062lwsm4r] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sharelinks-loading[b-i062lwsm4r],
.sharelinks-empty[b-i062lwsm4r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 16px;
    text-align: center;
    color: var(--color-text-secondary);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.sharelinks-toolbar[b-i062lwsm4r] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

[b-i062lwsm4r] .sharelinks-search {
    max-width: 360px;
}

.status-chips[b-i062lwsm4r] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.status-chip[b-i062lwsm4r] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-secondary);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.status-chip:hover[b-i062lwsm4r] {
    background: var(--color-bg-hover);
}

.status-chip--active[b-i062lwsm4r] {
    background: var(--color-brand-header);
    border-color: var(--color-brand-header);
    color: var(--color-text-on-brand);
}

.status-chip:focus-visible[b-i062lwsm4r] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.status-chip-count[b-i062lwsm4r] {
    opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
    .status-chip[b-i062lwsm4r] {
        transition: none;
    }
}

.sharelinks-loading-skeleton[b-i062lwsm4r] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sharelinks-skeleton-row[b-i062lwsm4r] {
    height: 48px;
    border-radius: var(--radius-md);
    background: linear-gradient(90deg, var(--color-bg-surface-alt) 25%, var(--color-bg-hover) 50%, var(--color-bg-surface-alt) 75%);
    background-size: 200% 100%;
    animation: sharelinks-skeleton-shimmer-b-i062lwsm4r 1.4s ease infinite;
}

@keyframes sharelinks-skeleton-shimmer-b-i062lwsm4r {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sharelinks-skeleton-row[b-i062lwsm4r] {
        animation: none;
    }
}

.sharelinks-table-scroll[b-i062lwsm4r] {
    overflow-x: auto;
}

.sharelinks-table[b-i062lwsm4r] {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.sharelinks-header-cell[b-i062lwsm4r] {
    padding: 10px 12px;
    text-align: left;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-text-secondary);
    background: var(--color-bg-surface-alt);
    border-bottom: 1px solid var(--color-border);
}

.sharelinks-row:hover[b-i062lwsm4r] {
    background: var(--color-bg-hover);
}

.sharelinks-cell[b-i062lwsm4r] {
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
    font-size: 13px;
    color: var(--color-text-primary);
}

.sharelinks-cell--video[b-i062lwsm4r] {
    font-weight: 600;
}

.sharelinks-cell--muted[b-i062lwsm4r] {
    color: var(--color-text-secondary);
    font-size: 12px;
    white-space: nowrap;
}

.sharelinks-cell--actions[b-i062lwsm4r] {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.sharelinks-metric[b-i062lwsm4r] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text-secondary);
    font-size: 12px;
}

.sharelinks-copy-button[b-i062lwsm4r],
.sharelinks-menu-button[b-i062lwsm4r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--radius-pill);
    background: none;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.sharelinks-copy-button:hover[b-i062lwsm4r],
.sharelinks-menu-button:hover[b-i062lwsm4r] {
    background: var(--color-bg-hover);
}

.sharelinks-copy-button:focus-visible[b-i062lwsm4r],
.sharelinks-menu-button:focus-visible[b-i062lwsm4r],
.sharelinks-reactivate-button:focus-visible[b-i062lwsm4r] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.sharelinks-reactivate-button[b-i062lwsm4r] {
    padding: 4px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.sharelinks-reactivate-button:hover[b-i062lwsm4r] {
    background: var(--color-bg-hover);
}

@media (pointer: coarse) {
    .sharelinks-copy-button[b-i062lwsm4r],
    .sharelinks-menu-button[b-i062lwsm4r] {
        min-width: 44px;
        min-height: 44px;
    }

    .sharelinks-reactivate-button[b-i062lwsm4r] {
        min-height: 44px;
    }

    .status-chip[b-i062lwsm4r] {
        min-height: 44px;
        padding: 8px 14px;
    }
}

.sharelink-card-stack[b-i062lwsm4r] {
    display: none;
}

.sharelink-card[b-i062lwsm4r] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.sharelink-card-header[b-i062lwsm4r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sharelink-card-title[b-i062lwsm4r] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.sharelink-card-meta[b-i062lwsm4r] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--color-text-secondary);
}

.sharelink-card-actions[b-i062lwsm4r] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sharelinks-delete-warning[b-i062lwsm4r] {
    color: var(--color-text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

.sharelinks-confirm-root[b-i062lwsm4r] {
    display: contents;
}

[b-i062lwsm4r] .sharelinks-confirm-dialog {
    --dialog-width: min(90vw, 420px);
}

@media (max-width: 1023px) {
    .sharelinks-header-cell--low-priority[b-i062lwsm4r],
    .sharelinks-cell--low-priority[b-i062lwsm4r] {
        display: none;
    }
}

@media (max-width: 640px) {
    .sharelinks-table-scroll[b-i062lwsm4r] {
        display: none;
    }

    .sharelink-card-stack[b-i062lwsm4r] {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    [b-i062lwsm4r] .sharelinks-project-select {
        max-width: none;
        width: 100%;
    }

    [b-i062lwsm4r] .sharelinks-search {
        max-width: none;
    }

    .status-chips[b-i062lwsm4r] {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    [b-i062lwsm4r] .sharelinks-confirm-dialog {
        --dialog-width: 100vw;
        position: fixed;
        inset: auto 0 0 0;
        margin: 0;
        max-height: 85dvh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
}

/* Marks a row whose target is a project rather than a video — the title column names both. */
.sharelinks-project-badge[b-i062lwsm4r] {
    display: inline-flex;
    align-items: center;
    margin-inline-start: var(--space-2);
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    background: var(--color-bg-selected);
    color: var(--color-brand-header);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
/* /Modules/UserManagement/Pages/UserManagement.razor.rz.scp.css */
.user-management-page[b-w406e3dtdh] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px 28px;
    font-family: var(--font-body);
    color: var(--color-text-primary);
}

.user-management-header[b-w406e3dtdh] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.user-management-title[b-w406e3dtdh] {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    margin: 0;
    color: var(--color-text-primary);
}

.user-management-summary[b-w406e3dtdh] {
    margin: 4px 0 0;
    color: var(--color-text-muted);
    font-size: 13px;
}

.user-management-actionbar[b-w406e3dtdh] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.user-management-search[b-w406e3dtdh] {
    flex: 1 1 240px;
    min-width: 200px;
}

.user-management-filter[b-w406e3dtdh] {
    min-width: 160px;
}

.user-management-table[b-w406e3dtdh] {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.user-management-empty[b-w406e3dtdh] {
    padding: 48px 16px;
    text-align: center;
    color: var(--color-text-muted);
}

.user-management-grid[b-w406e3dtdh] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.user-management-grid thead th[b-w406e3dtdh] {
    text-align: left;
    padding: 12px 16px;
    background: var(--color-bg-surface-alt);
    color: var(--color-text-secondary);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--color-border);
}

.user-management-grid tbody td[b-w406e3dtdh] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.user-management-grid tbody tr:last-child td[b-w406e3dtdh] {
    border-bottom: none;
}

.user-management-col-actions[b-w406e3dtdh] {
    text-align: right;
    white-space: nowrap;
}

.user-cell[b-w406e3dtdh] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-cell-avatar[b-w406e3dtdh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-pill);
    background: var(--color-brand-yellow);
    color: var(--color-brand-yellow-text);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
}

.user-cell-info[b-w406e3dtdh] {
    display: flex;
    flex-direction: column;
}

.user-cell-name[b-w406e3dtdh] {
    font-weight: 600;
    color: var(--color-text-primary);
}

.user-cell-email[b-w406e3dtdh] {
    font-size: 12px;
    color: var(--color-text-muted);
}

.role-badge[b-w406e3dtdh] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.role-badge.role-admin[b-w406e3dtdh] {
    background: var(--color-status-success-bg);
    color: var(--color-status-success-text);
}

.role-badge.role-dienstleister[b-w406e3dtdh] {
    background: var(--color-bg-hover);
    color: var(--color-text-secondary);
}

.role-badge.role-kunde[b-w406e3dtdh] {
    background: var(--color-status-warning-bg);
    color: var(--color-status-warning-text);
}

.status-badge[b-w406e3dtdh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
}

.status-dot[b-w406e3dtdh] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.status-badge.status-active[b-w406e3dtdh] {
    background: var(--color-status-success-bg);
    color: var(--color-status-success-text);
}

.status-badge.status-locked[b-w406e3dtdh] {
    background: var(--color-status-danger-bg);
    color: var(--color-status-danger-text);
}

.status-badge.status-pendinginvitation[b-w406e3dtdh] {
    background: var(--color-status-warning-bg);
    color: var(--color-status-warning-text);
}

.muted[b-w406e3dtdh] {
    color: var(--color-text-muted);
    font-size: 12px;
}

.dialog-form[b-w406e3dtdh] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
    min-width: 360px;
}

.dialog-hint[b-w406e3dtdh] {
    margin: -6px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-text-secondary);
}
/* /Modules/VideoLibrary/Components/BulkActionBar.razor.rz.scp.css */
.bulk-bar[b-o5sy5e3cta] {
    position: sticky;
    bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 18px;
    background: var(--color-bg-elevated);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-elevated);
    font-family: var(--font-body);
}

.bulk-bar-count[b-o5sy5e3cta] {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.bulk-bar-actions[b-o5sy5e3cta] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

[b-o5sy5e3cta] .primary-action {
    --accent-fill-rest: var(--color-brand-header);
    --accent-fill-hover: var(--color-brand-header-hover);
    --accent-fill-active: var(--color-brand-header-hover);
}

[b-o5sy5e3cta] .danger-button {
    --accent-fill-rest: var(--color-danger);
    --accent-fill-hover: var(--color-brand-red);
}

[b-o5sy5e3cta] .bulk-bar-clear {
    color: var(--color-text-secondary);
}

@media (max-width: 640px) {
    .bulk-bar[b-o5sy5e3cta] {
        bottom: var(--bottom-tab-bar-height);
    }

    .bulk-bar-action-label[b-o5sy5e3cta] {
        display: none;
    }
}
/* /Modules/VideoLibrary/Components/BulkStatusDialog.razor.rz.scp.css */
.bulk-status-dialog-root[b-suzhxi4okf] {
    display: contents;
}

[b-suzhxi4okf] .bulk-status-dialog {
    --dialog-width: min(90vw, 420px);
}

.bulk-status-dialog-options[b-suzhxi4okf] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bulk-status-dialog-option[b-suzhxi4okf] {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: transparent;
}

.bulk-status-dialog-option:hover[b-suzhxi4okf] {
    background: var(--color-bg-hover);
}

.bulk-status-dialog-option:focus-within[b-suzhxi4okf] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 1px;
}

.bulk-status-dialog-option--selected[b-suzhxi4okf] {
    background: var(--color-bg-selected);
    border-color: var(--color-brand-header);
}

.bulk-status-dialog-option-input[b-suzhxi4okf] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.bulk-status-dialog-option-label[b-suzhxi4okf] {
    flex: 1;
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.bulk-status-dialog-option--selected .bulk-status-dialog-option-label[b-suzhxi4okf] {
    font-weight: 600;
}

.bulk-status-dialog-hint[b-suzhxi4okf] {
    margin-top: 10px;
    color: var(--color-text-muted);
    font-size: 12px;
}

[b-suzhxi4okf] .primary-action {
    --accent-fill-rest: var(--color-brand-header);
    --accent-fill-hover: var(--color-brand-header-hover);
    --accent-fill-active: var(--color-brand-header-hover);
}
/* /Modules/VideoLibrary/Components/DeleteVideoDialog.razor.rz.scp.css */
.delete-video-dialog-root[b-lsdx0fuu96] {
    display: contents;
}

[b-lsdx0fuu96] .delete-dialog {
    --dialog-width: min(90vw, 420px);
}

.delete-dialog-warning[b-lsdx0fuu96] {
    color: var(--color-text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

[b-lsdx0fuu96] .danger-button {
    --accent-fill-rest: var(--color-danger);
    --accent-fill-hover: var(--color-brand-red);
}
/* /Modules/VideoLibrary/Components/FolderTreeSidebar.razor.rz.scp.css */
.folder-rail[b-pxjue94gvh] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 8px;
    background: var(--color-bg-surface);
    font-family: var(--font-body);
}

.folder-rail-new-button[b-pxjue94gvh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 6px 10px;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-secondary);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.folder-rail-new-button:hover[b-pxjue94gvh] {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.folder-rail-new-button:focus-visible[b-pxjue94gvh] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.folder-tree[b-pxjue94gvh] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.folder-node[b-pxjue94gvh] {
    --folder-depth: 0;
    display: flex;
    align-items: center;
    gap: 2px;
    padding-left: calc(8px + var(--folder-depth) * 16px);
    padding-right: 4px;
    border-radius: var(--radius-md);
    border-left: 3px solid transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease, outline-color 0.15s ease;
}

.folder-node:hover[b-pxjue94gvh] {
    background: var(--color-bg-hover);
}

.folder-node--active[b-pxjue94gvh] {
    background: var(--color-bg-selected);
    border-left-color: var(--color-brand-header);
}

.folder-node--drop-target[b-pxjue94gvh] {
    background: var(--color-bg-selected);
    outline: 2px dashed var(--color-border-focus);
    outline-offset: -2px;
}

.folder-node-select[b-pxjue94gvh] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 6px 4px;
    border: none;
    background: transparent;
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.folder-node-select:focus-visible[b-pxjue94gvh] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: -2px;
}

.folder-node-chevron[b-pxjue94gvh] {
    color: var(--color-text-muted);
}

.folder-node-name[b-pxjue94gvh] {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.folder-node-count[b-pxjue94gvh] {
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 600;
}

.folder-node-action[b-pxjue94gvh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.folder-node-action:hover[b-pxjue94gvh] {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.folder-node-action:focus-visible[b-pxjue94gvh] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 1px;
}

.folder-node-action--danger:hover[b-pxjue94gvh] {
    color: var(--color-status-danger-text);
    background: var(--color-status-danger-bg);
}

@media (pointer: coarse) {
    .folder-node-action[b-pxjue94gvh] {
        width: 44px;
        height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .folder-node[b-pxjue94gvh],
    .folder-rail-new-button[b-pxjue94gvh],
    .folder-node-action[b-pxjue94gvh] {
        transition: none;
    }
}
/* /Modules/VideoLibrary/Components/LibraryToolbar.razor.rz.scp.css */
.videolibrary-toolbar[b-wcrrxxfjep] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-family: var(--font-body);
}

.videolibrary-toolbar-row[b-wcrrxxfjep] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

[b-wcrrxxfjep] .videolibrary-search {
    flex: 1 1 240px;
    min-width: 200px;
}

[b-wcrrxxfjep] .videolibrary-sort {
    min-width: 180px;
}

[b-wcrrxxfjep] .videolibrary-tags {
    min-width: 180px;
}

[b-wcrrxxfjep] .videolibrary-select-toggle {
    flex: 0 0 auto;
}

[b-wcrrxxfjep] .videolibrary-open-folders {
    display: none;
    flex: 0 0 auto;
}

.videolibrary-view-toggle[b-wcrrxxfjep] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: var(--color-bg-surface-alt);
    border-radius: var(--radius-md);
}

.videolibrary-view-toggle-button[b-wcrrxxfjep] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background-color 0.12s ease, box-shadow 0.12s ease, color 0.12s ease;
}

.videolibrary-view-toggle-button:hover[b-wcrrxxfjep] {
    color: var(--color-text-primary);
}

.videolibrary-view-toggle-button--active[b-wcrrxxfjep] {
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-card);
}

.videolibrary-view-toggle-button:focus-visible[b-wcrrxxfjep] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 1px;
}

.status-chips[b-wcrrxxfjep] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.status-chip[b-wcrrxxfjep] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-secondary);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.status-chip:hover[b-wcrrxxfjep] {
    background: var(--color-bg-hover);
}

.status-chip--active[b-wcrrxxfjep] {
    background: var(--color-brand-header);
    border-color: var(--color-brand-header);
    color: var(--color-text-on-brand);
}

.status-chip:focus-visible[b-wcrrxxfjep] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.status-chip-count[b-wcrrxxfjep] {
    opacity: 0.85;
}

@media (pointer: coarse) {
    .videolibrary-view-toggle-button[b-wcrrxxfjep],
    .status-chip[b-wcrrxxfjep] {
        min-height: 44px;
        min-width: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .videolibrary-view-toggle-button[b-wcrrxxfjep],
    .status-chip[b-wcrrxxfjep] {
        transition: none;
    }
}

@media (max-width: 640px) {
    [b-wcrrxxfjep] .videolibrary-open-folders {
        display: inline-flex;
    }
}
/* /Modules/VideoLibrary/Components/MoveVideoDialog.razor.rz.scp.css */
.move-video-dialog-root[b-s3icaxf2n7] {
    display: contents;
}

[b-s3icaxf2n7] .move-dialog {
    --dialog-width: min(90vw, 420px);
}

.move-dialog-folder-list[b-s3icaxf2n7] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 6px;
    background: var(--color-bg-surface-alt);
}

.move-dialog-folder-option[b-s3icaxf2n7] {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
}

.move-dialog-folder-option:hover[b-s3icaxf2n7] {
    background: var(--color-bg-hover);
}

.move-dialog-folder-option:focus-within[b-s3icaxf2n7] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 1px;
}

.move-dialog-folder-option--selected[b-s3icaxf2n7] {
    background: var(--color-bg-selected);
    border-color: var(--color-brand-header);
}

.move-dialog-folder-option-input[b-s3icaxf2n7] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.move-dialog-folder-option-label[b-s3icaxf2n7] {
    flex: 1;
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.move-dialog-folder-option--selected .move-dialog-folder-option-label[b-s3icaxf2n7] {
    font-weight: 600;
}

[b-s3icaxf2n7] .primary-action {
    --accent-fill-rest: var(--color-brand-header);
    --accent-fill-hover: var(--color-brand-header-hover);
    --accent-fill-active: var(--color-brand-header-hover);
}
/* /Modules/VideoLibrary/Components/ProjectVideoSection.razor.rz.scp.css */
/* A section of the project page now, so the padding is a section's rather than a page's and there is no
   breadcrumb, no page title and no action row — the page owns all three. */
.videolibrary-page[b-ia0v4eogu0] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: var(--space-4);
    font-family: var(--font-body);
    color: var(--color-text-primary);
}

.videolibrary-section-head[b-ia0v4eogu0] {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.videolibrary-section-title[b-ia0v4eogu0] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.videolibrary-section-subtitle[b-ia0v4eogu0] {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 13px;
}

[b-ia0v4eogu0] .primary-action {
    --accent-fill-rest: var(--color-brand-header);
    --accent-fill-hover: var(--color-brand-header-hover);
    --accent-fill-active: var(--color-brand-header-hover);
}

[b-ia0v4eogu0] .danger-button {
    --accent-fill-rest: var(--color-danger);
    --accent-fill-hover: var(--color-brand-red);
}

.videolibrary-loading[b-ia0v4eogu0] {
    padding: 48px 16px;
    text-align: center;
    color: var(--color-text-muted);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.videolibrary-body[b-ia0v4eogu0] {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

[b-ia0v4eogu0] .folder-rail {
    position: sticky;
    top: 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.videolibrary-main[b-ia0v4eogu0] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.videolibrary-toolbar-region[b-ia0v4eogu0] {
    outline: none;
}

.videolibrary-rejected-list[b-ia0v4eogu0] {
    margin: 6px 0 0;
    padding-left: 18px;
}

.videolibrary-visually-hidden[b-ia0v4eogu0] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.videolibrary-text-dialog-error[b-ia0v4eogu0] {
    display: block;
    margin-top: 6px;
    color: var(--color-status-danger-text);
    font-size: 12px;
}

.video-grid[b-ia0v4eogu0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.video-list-scroll[b-ia0v4eogu0] {
    overflow-x: auto;
}

.video-list-table[b-ia0v4eogu0] {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.video-list-header-cell[b-ia0v4eogu0] {
    padding: 10px 12px;
    text-align: left;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-text-secondary);
    background: var(--color-bg-surface-alt);
    border-bottom: 1px solid var(--color-border);
}

.video-list-header-cell--select[b-ia0v4eogu0] {
    width: 44px;
}

.video-list-header-cell--thumb[b-ia0v4eogu0] {
    width: 96px;
}

.videolibrary-empty[b-ia0v4eogu0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 64px 16px;
    text-align: center;
    color: var(--color-text-muted);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.videolibrary-folder-delete-warning[b-ia0v4eogu0] {
    color: var(--color-text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

[b-ia0v4eogu0] .videolibrary-text-dialog,
[b-ia0v4eogu0] .videolibrary-folder-delete-dialog {
    --dialog-width: min(90vw, 420px);
}

[b-ia0v4eogu0] .folder-sheet {
    --dialog-width: 100vw;
    position: fixed;
    inset: auto 0 0 0;
    margin: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 80vh;
}

@media (min-width: 641px) and (max-width: 1023px) {
    .videolibrary-body[b-ia0v4eogu0] {
        grid-template-columns: 200px minmax(0, 1fr);
    }

    [b-ia0v4eogu0] .folder-rail {
        top: 8px;
    }

    .video-grid[b-ia0v4eogu0] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .video-list-header-cell--shares[b-ia0v4eogu0] {
        display: none;
    }
}

@media (max-width: 640px) {
    .videolibrary-body[b-ia0v4eogu0] {
        grid-template-columns: 1fr;
    }

    [b-ia0v4eogu0] .folder-rail {
        display: none;
    }

    [b-ia0v4eogu0] .videolibrary-view-toggle {
        display: none;
    }

    .video-grid[b-ia0v4eogu0] {
        grid-template-columns: 1fr;
    }
}
/* /Modules/VideoLibrary/Components/StatusBadge.razor.rz.scp.css */
.status-badge[b-k2bji2sh4m] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.status-badge--inprogress[b-k2bji2sh4m] {
    background: var(--color-bg-surface-alt);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

.status-badge--feedback[b-k2bji2sh4m] {
    background: var(--color-brand-yellow);
    color: var(--color-brand-yellow-text);
}

.status-badge--ready[b-k2bji2sh4m] {
    background: var(--color-brand-header);
    color: var(--color-text-on-brand);
}

.status-badge--failed[b-k2bji2sh4m] {
    background: var(--color-status-danger-bg);
    color: var(--color-status-danger-text);
}
/* /Modules/VideoLibrary/Components/VideoCard.razor.rz.scp.css */
.video-card[b-viegygg6ct] {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.video-card:hover[b-viegygg6ct] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-elevated);
}

.video-card--selected[b-viegygg6ct] {
    background: var(--color-bg-selected);
    box-shadow: 0 0 0 2px var(--color-brand-header);
}

@media (prefers-reduced-motion: reduce) {
    .video-card[b-viegygg6ct] {
        transition: none;
    }

    .video-card:hover[b-viegygg6ct] {
        transform: none;
    }
}

.video-card-nav[b-viegygg6ct] {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.video-card-nav:focus-visible[b-viegygg6ct] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: -2px;
}

.video-card-thumb-frame[b-viegygg6ct] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

[b-viegygg6ct] .video-card-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.video-card-duration[b-viegygg6ct] {
    position: absolute;
    bottom: 8px;
    right: 8px;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, .6);
    color: var(--color-text-on-brand);
    font-family: var(--font-monospace);
    font-size: 11px;
    line-height: 1.4;
}

.video-card-title[b-viegygg6ct] {
    margin: 8px 12px 0;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.video-card-body[b-viegygg6ct] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 12px 12px;
}

.video-card-meta[b-viegygg6ct] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.video-card-date[b-viegygg6ct] {
    font-size: 12px;
    color: var(--color-text-muted);
}

.video-card-metrics[b-viegygg6ct] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.video-card-metric[b-viegygg6ct] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--color-text-muted);
}

.video-card-checkbox[b-viegygg6ct] {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    width: 18px;
    height: 18px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease;
}

.video-card:hover .video-card-checkbox[b-viegygg6ct],
.video-card:focus-within .video-card-checkbox[b-viegygg6ct],
.video-card--selected .video-card-checkbox[b-viegygg6ct],
.video-card--selection-mode .video-card-checkbox[b-viegygg6ct] {
    opacity: 1;
    pointer-events: auto;
}

.video-card-menu-button[b-viegygg6ct] {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--radius-pill);
    background: rgba(0, 0, 0, .55);
    color: var(--color-text-on-brand);
    opacity: 0;
    cursor: pointer;
    transition: opacity 150ms ease;
}

.video-card:hover .video-card-menu-button[b-viegygg6ct],
.video-card:focus-within .video-card-menu-button[b-viegygg6ct] {
    opacity: 1;
}

.video-card-menu-button:focus-visible[b-viegygg6ct] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.video-card-pending-dot[b-viegygg6ct] {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-brand-yellow);
    box-shadow: 0 0 0 2px var(--color-bg-surface);
}

@media (pointer: coarse) {
    .video-card-checkbox[b-viegygg6ct],
    .video-card-menu-button[b-viegygg6ct] {
        opacity: 1;
        pointer-events: auto;
        min-width: 44px;
        min-height: 44px;
    }
}
/* /Modules/VideoLibrary/Components/VideoContextMenu.razor.rz.scp.css */
.video-context-menu[b-iuw9uj7zan] {
    display: contents;
}

[b-iuw9uj7zan] .video-context-menu-danger-item {
    color: var(--color-status-danger-text);
}
/* /Modules/VideoLibrary/Components/VideoRow.razor.rz.scp.css */
.video-list-row[b-ka32bl34y1] {
    transition: background-color 150ms ease;
}

.video-list-row:hover[b-ka32bl34y1] {
    background: var(--color-bg-hover);
}

.video-list-row--selected[b-ka32bl34y1] {
    background: var(--color-bg-selected);
}

@media (prefers-reduced-motion: reduce) {
    .video-list-row[b-ka32bl34y1] {
        transition: none;
    }
}

.video-list-cell[b-ka32bl34y1] {
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
    font-size: 13px;
    color: var(--color-text-primary);
}

.video-list-cell--select[b-ka32bl34y1] {
    width: 44px;
}

.video-list-cell--thumb[b-ka32bl34y1] {
    width: 96px;
}

[b-ka32bl34y1] .video-card-thumb {
    display: block;
    width: 84px;
    height: 47px;
    border-radius: var(--radius-md);
}

.video-list-cell--uploaded[b-ka32bl34y1] {
    color: var(--color-text-muted);
    font-size: 12px;
    white-space: nowrap;
}

.video-list-nav[b-ka32bl34y1] {
    display: inline-flex;
    align-items: center;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: left;
}

.video-list-nav--title[b-ka32bl34y1] {
    font-weight: 600;
    color: var(--color-text-primary);
}

.video-list-nav:focus-visible[b-ka32bl34y1] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.video-list-duration[b-ka32bl34y1] {
    font-family: var(--font-monospace);
    font-size: 12px;
    color: var(--color-text-secondary);
}

.video-list-metric[b-ka32bl34y1] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text-muted);
    font-size: 12px;
}

.video-list-checkbox[b-ka32bl34y1] {
    width: 16px;
    height: 16px;
}

.video-list-menu-button[b-ka32bl34y1] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    border-radius: var(--radius-pill);
    color: var(--color-text-secondary);
    cursor: pointer;
}

.video-list-menu-button:hover[b-ka32bl34y1] {
    background: var(--color-bg-hover);
}

.video-list-menu-button:focus-visible[b-ka32bl34y1] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.video-list-pending-dot[b-ka32bl34y1] {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-brand-yellow);
    box-shadow: 0 0 0 2px var(--color-bg-surface);
}

@media (pointer: coarse) {
    .video-list-checkbox[b-ka32bl34y1],
    .video-list-menu-button[b-ka32bl34y1] {
        min-width: 44px;
        min-height: 44px;
    }
}

@media (min-width: 641px) and (max-width: 1023px) {
    .video-list-cell--shares[b-ka32bl34y1] {
        display: none;
    }
}
/* /Modules/VideoLibrary/Components/VideoThumbnail.razor.rz.scp.css */
.video-card-thumb[b-jqevphqvtw] {
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--color-brand-stage);
    background-image: var(--thumb-image, none);
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-lg);
}

.video-card-thumb--placeholder[b-jqevphqvtw] {
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(135deg, var(--color-brand-stage), var(--color-brand-header));
}

[b-jqevphqvtw] .video-card-thumb-icon {
    color: var(--color-text-on-brand);
    opacity: 0.85;
}
/* /Modules/VideoReview/Components/CommentCard.razor.rz.scp.css */
.comment-card[b-0ct4eiih4u] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px 10px 16px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid transparent;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    transition: background-color 150ms ease, box-shadow 150ms ease;
}

.comment-card:hover[b-0ct4eiih4u] {
    background: var(--color-bg-hover);
}

.comment-card--priority-normal[b-0ct4eiih4u] {
    border-left-color: var(--color-brand-yellow);
}

.comment-card--priority-high[b-0ct4eiih4u] {
    border-left-color: var(--color-brand-red);
}

.comment-card--done[b-0ct4eiih4u] {
    border-left-color: color-mix(in srgb, var(--color-status-success-text) 65%, transparent);
}

.comment-card--active[b-0ct4eiih4u] {
    background: var(--color-bg-selected);
    box-shadow: inset 0 0 0 2px var(--color-brand-header);
}

@media (prefers-reduced-motion: reduce) {
    .comment-card[b-0ct4eiih4u] {
        transition: none;
    }
}

.comment-card-seek[b-0ct4eiih4u] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.comment-card-seek:focus-visible[b-0ct4eiih4u] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.comment-card-head[b-0ct4eiih4u] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.comment-card-timecode[b-0ct4eiih4u] {
    font-family: var(--font-monospace);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.comment-card-author[b-0ct4eiih4u] {
    display: inline-block;
    max-width: 100%;
    font-size: 12px;
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comment-card-text[b-0ct4eiih4u] {
    display: block;
    color: var(--color-text-secondary);
    font-size: 13px;
    line-height: 1.5;
    word-break: break-word;
}

.comment-card-actions[b-0ct4eiih4u] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.comment-card-checkbox[b-0ct4eiih4u] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-brand-header);
    cursor: pointer;
}

.comment-card-done-indicator[b-0ct4eiih4u] {
    display: inline-flex;
    align-items: center;
    color: var(--color-text-muted);
    opacity: 0.6;
}

.comment-card-done-indicator--done[b-0ct4eiih4u] {
    color: var(--color-status-success-text);
    opacity: 1;
}

[b-0ct4eiih4u] .comment-card-seek-affordance {
    margin-left: auto;
    color: var(--color-text-muted);
}

.comment-card-menu-button[b-0ct4eiih4u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.comment-card-menu-button:hover[b-0ct4eiih4u] {
    background: var(--color-bg-hover);
}

.comment-card-menu-button:focus-visible[b-0ct4eiih4u] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

[b-0ct4eiih4u] .comment-card-menu-danger-item {
    color: var(--color-status-danger-text);
}

@media (pointer: coarse) {
    .comment-card-checkbox[b-0ct4eiih4u] {
        min-width: 44px;
        min-height: 44px;
    }

    .comment-card-menu-button[b-0ct4eiih4u] {
        min-width: 44px;
        min-height: 44px;
    }
}

/* A reply reads as a turn in a conversation rather than a fresh note: quieter surface, no marker colour. */
.comment-card--reply[b-0ct4eiih4u] {
    background: var(--color-bg-elevated-alt);
    border-inline-start-color: transparent;
}
/* /Modules/VideoReview/Components/CommentComposer.razor.rz.scp.css */
/*
  A column. As a row it held a field and a button, which fitted; a checkbox label and a second button did not,
  and in a 380px panel the label wrapped to five lines while the buttons squeezed to nothing. The two buttons
  share the footer row instead.
*/
.comment-composer[b-b9lru0oet3] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px;
    background: var(--color-bg-elevated);
    border-top: 1px solid var(--color-border);
    font-family: var(--font-body);
}

[b-b9lru0oet3] .comment-composer-input {
    flex: 1 1 auto;
    min-width: 0;
}

[b-b9lru0oet3] .comment-composer-submit {
    --accent-fill-rest: var(--color-brand-header);
    --accent-fill-hover: var(--color-brand-header-hover);
    --accent-fill-active: var(--color-brand-header-hover);
    flex: 0 0 auto;
    min-height: 44px;
}

.comment-composer-anchor[b-b9lru0oet3] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    font-family: var(--font-base);
    font-size: 13px;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.comment-composer-anchor-checkbox[b-b9lru0oet3] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-brand-header);
    cursor: pointer;
}

.comment-composer-anchor-hint[b-b9lru0oet3] {
    margin: 0;
    font-family: var(--font-base);
    font-size: 12px;
    color: var(--color-text-secondary);
}

/*
  The position on the left, the buttons on the right, wrapping instead of squeezing. `min-width: 0` on the label
  is what lets it shrink and ellipsise rather than forcing the row wider than the panel — a flex item defaults to
  its content's width, which is how a long label pushed the buttons off the edge before.
*/
.comment-composer-actions[b-b9lru0oet3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.comment-composer-actions .comment-composer-anchor[b-b9lru0oet3] {
    flex: 1 1 auto;
    min-width: 0;
}

/*
  `margin-left: auto` rather than the parent's `justify-content`, so the buttons hug the right edge whether they
  share the row with the checkbox or have wrapped below it. Left to the parent alone, a wrapped second row put
  them on the left, which reads as an accident rather than a layout.
*/
.comment-composer-buttons[b-b9lru0oet3] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
    margin-left: auto;
}

.comment-composer-annotate-hint[b-b9lru0oet3] {
    font-size: 12px;
    color: var(--color-text-secondary);
}
/* /Modules/VideoReview/Components/CommentSidebar.razor.rz.scp.css */
.comment-sidebar[b-fjstjxg5ri] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: var(--color-bg-elevated);
    font-family: var(--font-body);
}

.comment-sidebar-header[b-fjstjxg5ri] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 16px 8px;
}

.comment-sidebar-title[b-fjstjxg5ri] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.comment-sidebar-count[b-fjstjxg5ri] {
    font-size: 12px;
    color: var(--color-text-muted);
}

.comment-sidebar-filters[b-fjstjxg5ri] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 16px 12px;
}

.comment-filter-chip[b-fjstjxg5ri] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 32px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-secondary);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.comment-filter-chip:hover[b-fjstjxg5ri] {
    background: var(--color-bg-hover);
}

.comment-filter-chip--active[b-fjstjxg5ri] {
    background: var(--color-brand-header);
    border-color: var(--color-brand-header);
    color: var(--color-text-on-brand);
}

.comment-filter-chip:focus-visible[b-fjstjxg5ri] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.comment-filter-chip-count[b-fjstjxg5ri] {
    opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
    .comment-filter-chip[b-fjstjxg5ri] {
        transition: none;
    }
}

@media (pointer: coarse) {
    .comment-filter-chip[b-fjstjxg5ri] {
        min-height: 44px;
    }
}

.comment-sidebar-list[b-fjstjxg5ri] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 16px 16px;
}

.comment-sidebar-empty[b-fjstjxg5ri] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 32px 16px;
    text-align: center;
}

.comment-sidebar-empty-title[b-fjstjxg5ri] {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--color-text-primary);
}

.comment-sidebar-empty-hint[b-fjstjxg5ri] {
    margin: 0;
    font-size: 13px;
    color: var(--color-text-muted);
}
/* /Modules/VideoReview/Components/CommentThread.razor.rz.scp.css */
.comment-thread[b-ar5e1178tl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* The indent and the rule are what say "these belong to the comment above" without a label. */
.comment-thread-replies[b-ar5e1178tl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-inline-start: var(--space-4);
    padding-inline-start: var(--space-2);
    border-inline-start: 2px solid var(--color-border);
}

.comment-thread-expander[b-ar5e1178tl],
.comment-thread-reply-start[b-ar5e1178tl],
.comment-thread-reply-cancel[b-ar5e1178tl] {
    align-self: flex-start;
    min-height: 44px;
    padding: 0 var(--space-2);
    border: none;
    background: transparent;
    color: var(--color-link);
    font-family: var(--font-base);
    font-size: 13px;
    cursor: pointer;
}

.comment-thread-expander:hover[b-ar5e1178tl],
.comment-thread-reply-start:hover[b-ar5e1178tl],
.comment-thread-reply-cancel:hover[b-ar5e1178tl] {
    text-decoration: underline;
}

@media (pointer: coarse) {
    .comment-thread-expander:hover[b-ar5e1178tl],
    .comment-thread-reply-start:hover[b-ar5e1178tl],
    .comment-thread-reply-cancel:hover[b-ar5e1178tl] {
        text-decoration: none;
    }

    .comment-thread-expander:active[b-ar5e1178tl],
    .comment-thread-reply-start:active[b-ar5e1178tl],
    .comment-thread-reply-cancel:active[b-ar5e1178tl] {
        text-decoration: underline;
    }
}

.comment-thread-reply-box[b-ar5e1178tl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-inline-start: var(--space-4);
}

.comment-thread-reply-actions[b-ar5e1178tl] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.comment-thread-reply-error[b-ar5e1178tl] {
    font-family: var(--font-base);
    font-size: 12px;
    color: var(--color-status-danger-text);
}
/* /Modules/VideoReview/Components/CommentTimeline.razor.rz.scp.css */
.comment-timeline[b-aje2vo1c2k] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 16px;
    background: var(--color-brand-stage);
    font-family: var(--font-body);
}

.comment-timeline-track[b-aje2vo1c2k] {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-height: 24px;
}

.comment-timeline-scrubber[b-aje2vo1c2k] {
    width: 100%;
    height: 24px;
    margin: 0;
    appearance: none;
    background: transparent;
    accent-color: var(--color-accent);
    cursor: pointer;
}

.comment-timeline-scrubber[b-aje2vo1c2k]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--color-on-stage-divider);
}

.comment-timeline-scrubber[b-aje2vo1c2k]::-moz-range-track {
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--color-on-stage-divider);
}

.comment-timeline-scrubber:focus-visible[b-aje2vo1c2k] {
    outline: 2px solid var(--color-text-on-brand);
    outline-offset: 2px;
}

.comment-timeline-scrubber:disabled[b-aje2vo1c2k] {
    opacity: 0.4;
    cursor: default;
}

.comment-timeline-markers[b-aje2vo1c2k] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

@media (pointer: coarse) {
    .comment-timeline-track[b-aje2vo1c2k] {
        min-height: 44px;
    }

    .comment-timeline-scrubber[b-aje2vo1c2k] {
        height: 44px;
    }
}
/* /Modules/VideoReview/Components/FeedbackEdgeHandle.razor.rz.scp.css */
/*
  A narrow vertical tab, rounded on the side facing the picture and square on the side facing the seam, so it
  reads as attached to the panel rather than floating over the video. Its placement is the host's job — the
  shell knows where its own seam is and moves the handle with it.
*/
.feedback-handle[b-dz126u7txe] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;

    /* 44px wide so it is a legitimate touch target; the height is what keeps it a handle and not a bar. */
    min-width: 44px;
    min-height: 96px;
    padding: var(--space-2) 0;
    border: 1px solid var(--color-border);
    border-right: none;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    box-shadow: var(--shadow-card);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.feedback-handle:hover[b-dz126u7txe] {
    background: var(--color-bg-hover);
    color: var(--color-brand-header);
}

.feedback-handle:focus-visible[b-dz126u7txe] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

/*
  Open, the handle is against the panel's left edge rather than the window's, so it borders the panel on both
  sides — the rounding flips to face the picture it now sits beside.
*/
.feedback-handle--open[b-dz126u7txe] {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

/* Reads as a badge, not as part of the arrow. */
.feedback-handle-count[b-dz126u7txe] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: var(--radius-pill);
    background: var(--color-brand-yellow);
    color: var(--color-brand-yellow-text);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

@media (pointer: coarse) {
    .feedback-handle:hover[b-dz126u7txe] {
        background: var(--color-bg-elevated);
        color: var(--color-text-secondary);
    }
}
/* /Modules/VideoReview/Components/FrameAnnotator.razor.rz.scp.css */
.frame-annotator[b-6ggyn20m18] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.frame-annotator-stage[b-6ggyn20m18] {
    position: relative;
    width: 100%;
    background: var(--color-brand-stage);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/*
  Scaled to the width it is given and letterboxed by its own aspect ratio. The canvas keeps the video's
  intrinsic resolution as its backing store, so the still is stored at full size no matter how small the box
  is — which is why the pointer position has to be converted from display pixels to frame pixels in JS.
*/
.frame-annotator-canvas[b-6ggyn20m18] {
    display: block;
    width: 100%;
    height: auto;
    cursor: crosshair;
}

.frame-annotator-loading[b-6ggyn20m18],
.frame-annotator-unavailable[b-6ggyn20m18] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4);
    text-align: center;
    color: var(--color-text-on-brand);
}

.frame-annotator-loading[b-6ggyn20m18] {
    position: absolute;
    inset: 0;
    background: var(--color-scrim);
    font-size: 13px;
    font-weight: 600;
}

.frame-annotator-unavailable[b-6ggyn20m18] {
    color: var(--color-text-primary);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.frame-annotator-unavailable p[b-6ggyn20m18] {
    margin: 0;
}

.frame-annotator-tools[b-6ggyn20m18] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.frame-annotator-group[b-6ggyn20m18] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.frame-annotator-group--end[b-6ggyn20m18] {
    margin-left: auto;
    gap: var(--space-2);
}

/* 44px minimum on every one of them: these are pressed with a finger on the viewport where drawing is nicest. */
.frame-annotator-tool[b-6ggyn20m18],
.frame-annotator-swatch[b-6ggyn20m18],
.frame-annotator-weight[b-6ggyn20m18] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    cursor: pointer;
}

.frame-annotator-tool:hover[b-6ggyn20m18],
.frame-annotator-weight:hover[b-6ggyn20m18],
.frame-annotator-swatch:hover[b-6ggyn20m18] {
    background: var(--color-bg-hover);
}

.frame-annotator-tool.is-active[b-6ggyn20m18],
.frame-annotator-weight.is-active[b-6ggyn20m18],
.frame-annotator-swatch.is-active[b-6ggyn20m18] {
    border-color: var(--color-brand-header);
    box-shadow: inset 0 0 0 1px var(--color-brand-header);
    color: var(--color-brand-header);
}

.frame-annotator-tool:focus-visible[b-6ggyn20m18],
.frame-annotator-swatch:focus-visible[b-6ggyn20m18],
.frame-annotator-weight:focus-visible[b-6ggyn20m18] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

/*
  The swatch shows the colour it selects, which is the one thing a label could not do as well. The custom
  property is the one legitimate inline style here: the value is data, not presentation.
*/
.frame-annotator-swatch[b-6ggyn20m18]::after {
    content: "";
    width: 22px;
    height: 22px;
    border-radius: var(--radius-pill);
    background: var(--swatch);
    border: 1px solid var(--color-border);
}

/* Each weight button draws the thickness it means, so the three are told apart by looking rather than reading. */
.frame-annotator-weight[b-6ggyn20m18]::after {
    content: "";
    width: 22px;
    border-radius: var(--radius-pill);
    background: currentColor;
}

.frame-annotator-weight--thin[b-6ggyn20m18]::after {
    height: 2px;
}

.frame-annotator-weight--medium[b-6ggyn20m18]::after {
    height: 4px;
}

.frame-annotator-weight--thick[b-6ggyn20m18]::after {
    height: 7px;
}

[b-6ggyn20m18] .frame-annotator-text-input {
    min-width: 180px;
}

.frame-annotator-hint[b-6ggyn20m18] {
    margin: 0;
}

@media (max-width: 640px) {
    .frame-annotator-group--end[b-6ggyn20m18] {
        margin-left: 0;
        width: 100%;
    }
}

@media (pointer: coarse) {
    .frame-annotator-tool:hover[b-6ggyn20m18],
    .frame-annotator-weight:hover[b-6ggyn20m18],
    .frame-annotator-swatch:hover[b-6ggyn20m18] {
        background: var(--color-bg-elevated);
    }
}
/* /Modules/VideoReview/Components/PlaybackOverlay.razor.rz.scp.css */
/* Covers the whole picture: the frame is the play/pause target, not just the badge in the middle. */
.playback-overlay[b-o3w72mqo6j] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: opacity 0.18s ease;
}

/*
  Faded, not hidden. `visibility: hidden` or `display: none` would take the click target with it, and clicking
  the picture to pause it has to keep working after the symbol has gone.
*/
.playback-overlay--faded[b-o3w72mqo6j] {
    opacity: 0;
}

.playback-overlay-badge[b-o3w72mqo6j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: var(--radius-pill);
    background: var(--color-scrim);
    color: var(--color-text-on-brand);
    box-shadow: var(--shadow-elevated);
    transition: transform 0.18s ease, background-color 0.18s ease;
}

.playback-overlay-badge svg[b-o3w72mqo6j] {
    width: 32px;
    height: 32px;
}

.playback-overlay:hover .playback-overlay-badge[b-o3w72mqo6j] {
    background: var(--color-brand-header);
    transform: scale(1.06);
}

/* Touch has no hover, and a tap must not leave a grown badge behind. */
@media (pointer: coarse) {
    .playback-overlay:hover .playback-overlay-badge[b-o3w72mqo6j] {
        background: var(--color-scrim);
        transform: none;
    }

    .playback-overlay:active .playback-overlay-badge[b-o3w72mqo6j] {
        background: var(--color-brand-header);
    }
}

.playback-overlay:focus-visible[b-o3w72mqo6j] {
    outline: 2px solid var(--color-brand-yellow);
    outline-offset: -4px;
}

/* Focus has to reach the button even once it has faded, or the keyboard loses the control entirely. */
.playback-overlay:focus-visible.playback-overlay--faded[b-o3w72mqo6j] {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .playback-overlay[b-o3w72mqo6j],
    .playback-overlay-badge[b-o3w72mqo6j] {
        transition: none;
    }

    .playback-overlay:hover .playback-overlay-badge[b-o3w72mqo6j] {
        transform: none;
    }
}
/* /Modules/VideoReview/Components/PlayerControls.razor.rz.scp.css */
.player-controls[b-be4m0utv8c] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-brand-header);
    color: var(--color-text-on-brand);
    /* Square. The bar is the bottom of a composite whose own rounding clips it, so a radius here would show
       through as a seam against the timeline above. */
    border-radius: 0;
}

.player-controls-button[b-be4m0utv8c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.player-controls-button:hover[b-be4m0utv8c] {
    background: rgb(255 255 255 / 12%);
}

/* Touch has no hover, so the same affordance has to come from the pressed state instead. */
@media (pointer: coarse) {
    .player-controls-button:hover[b-be4m0utv8c] {
        background: transparent;
    }

    .player-controls-button:active[b-be4m0utv8c] {
        background: rgb(255 255 255 / 18%);
    }
}

.player-controls-button:focus-visible[b-be4m0utv8c] {
    outline: 2px solid var(--color-brand-yellow);
    outline-offset: 2px;
}

.player-controls-time[b-be4m0utv8c] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-inline-start: var(--space-2);
    font-family: var(--font-base);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.player-controls-separator[b-be4m0utv8c] {
    opacity: 0.6;
}

.player-controls-duration[b-be4m0utv8c] {
    opacity: 0.8;
}

.player-controls-volume[b-be4m0utv8c] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-inline-start: auto;
}

.player-controls-volume-slider[b-be4m0utv8c] {
    width: 96px;
    accent-color: var(--color-brand-yellow);
    cursor: pointer;
}

/* Below the tab-bar breakpoint the bar keeps play, stepping and the clock; the volume slider is the first
   thing to go, because a phone has hardware volume keys and the mute button stays. */
@media (max-width: 640px) {
    .player-controls-volume-slider[b-be4m0utv8c] {
        display: none;
    }

    .player-controls-volume[b-be4m0utv8c] {
        margin-inline-start: auto;
    }
}
/* /Modules/VideoReview/Components/ReviewToolbar.razor.rz.scp.css */
/*
  A grid rather than a flex row so the trail is flush left and the actions do not slide along as its text
  grows. The strip's background comes from the layout — the toolbar carrying the top bar's own green is what
  made it read as chrome instead of as part of the page.

  Default is the tight arrangement: trail left, actions and status to the right of it, one row. Centring the
  actions costs the trail the width of half the action row, and below roughly 1280px that is enough to clip
  "Studio" to "Studi" — so the centred variant is opted into further down, not out of.
*/
.review-toolbar[b-fswtb6y2g6] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px 16px;
    padding: 10px 16px;
    color: var(--color-text-on-brand);
    font-family: var(--font-body);
}

@media (min-width: 1280px) {
    .review-toolbar[b-fswtb6y2g6] {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    }

    .review-toolbar-actions[b-fswtb6y2g6] {
        justify-content: center;
    }
}

.review-toolbar-identity[b-fswtb6y2g6] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.review-toolbar-breadcrumb[b-fswtb6y2g6] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
}

.review-toolbar-crumb[b-fswtb6y2g6] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-on-stage-hint);
}

.review-toolbar-crumb--current[b-fswtb6y2g6] {
    color: var(--color-text-on-brand);
}

[b-fswtb6y2g6] .review-toolbar-chevron {
    flex: 0 0 auto;
    color: var(--color-on-stage-divider);
}

.review-toolbar-customer[b-fswtb6y2g6] {
    font-size: 12px;
    color: var(--color-on-stage-hint);
}

.review-toolbar-status[b-fswtb6y2g6] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
}

.review-toolbar-status[b-fswtb6y2g6]  .status-badge {
    box-shadow: inset 0 0 0 1px var(--color-on-stage-border);
}

.review-toolbar-actions[b-fswtb6y2g6] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    flex: 0 0 auto;
}

/* Below the compact breakpoint there is no room for three columns, so the strip stacks and everything runs
   flush left — a centred action row in a narrow column reads as misalignment, not as centring. */
@media (max-width: 768px) {
    .review-toolbar[b-fswtb6y2g6] {
        grid-template-columns: minmax(0, 1fr);
    }

    .review-toolbar-actions[b-fswtb6y2g6],
    .review-toolbar-status[b-fswtb6y2g6] {
        justify-content: flex-start;
    }
}

[b-fswtb6y2g6] .review-toolbar-ghost-button {
    --neutral-stroke-rest: var(--color-on-stage-border);
    --neutral-foreground-rest: var(--color-text-on-brand);
    color: var(--color-text-on-brand);
}

[b-fswtb6y2g6] .review-toolbar-ghost-button:hover {
    background: var(--color-on-stage-tint);
}

.review-toolbar-icon-button[b-fswtb6y2g6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-on-stage-border);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-on-brand);
    cursor: pointer;
    transition: background-color 0.12s ease;
}

/* The panel glyph only exists from size 20 up, while its neighbours are 16, so it is scaled here rather than
   left to render a head taller than the menu button beside it. */
.review-toolbar-icon-button svg[b-fswtb6y2g6] {
    width: 16px;
    height: 16px;
}

.review-toolbar-icon-button:hover[b-fswtb6y2g6] {
    background: var(--color-on-stage-tint);
}

.review-toolbar-icon-button:focus-visible[b-fswtb6y2g6] {
    outline: 2px solid var(--color-text-on-brand);
    outline-offset: 2px;
}

[b-fswtb6y2g6] .review-toolbar-menu-danger-item {
    color: var(--color-status-danger-text);
}

@media (prefers-reduced-motion: reduce) {
    .review-toolbar-icon-button[b-fswtb6y2g6] {
        transition: none;
    }
}

@media (pointer: coarse) {
    .review-toolbar-icon-button[b-fswtb6y2g6] {
        min-width: 44px;
        min-height: 44px;
    }
}

@media (min-width: 641px) and (max-width: 1023px) {
    .review-toolbar-button-label[b-fswtb6y2g6] {
        display: none;
    }
}

@media (max-width: 640px) {
    .review-toolbar-identity[b-fswtb6y2g6] {
        order: -1;
        flex: 1 1 100%;
        margin-right: 0;
    }

    .review-toolbar-button-label[b-fswtb6y2g6] {
        display: none;
    }
}

@media (max-height: 540px) and (orientation: landscape) {
    .review-toolbar[b-fswtb6y2g6] {
        padding: 4px 12px;
        gap: 6px 12px;
    }

    .review-toolbar-customer[b-fswtb6y2g6] {
        display: none;
    }

    .review-toolbar-crumb:not(.review-toolbar-crumb--current)[b-fswtb6y2g6] {
        display: none;
    }

    [b-fswtb6y2g6] .review-toolbar-chevron {
        display: none;
    }
}

/* A crumb that leads somewhere looks like it does, and keeps a 44px target on touch. */
.review-toolbar-crumb--link[b-fswtb6y2g6] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.review-toolbar-crumb--link:hover[b-fswtb6y2g6] {
    text-decoration: underline;
}

@media (pointer: coarse) {
    .review-toolbar-crumb--link:hover[b-fswtb6y2g6] {
        text-decoration: none;
    }

    .review-toolbar-crumb--link:active[b-fswtb6y2g6] {
        text-decoration: underline;
    }
}

.review-toolbar-crumb--link:focus-visible[b-fswtb6y2g6] {
    outline: 2px solid var(--color-brand-yellow);
    outline-offset: 2px;
}
/* /Modules/VideoReview/Components/SidebarFab.razor.rz.scp.css */
/*
  Stacked above the help button rather than beside it, because both are fixed to the bottom-right corner and
  both clear the mobile tab bar — so they landed exactly on top of each other, the help button inside this
  one. The page-specific control yields to the one every page carries.
*/
.sidebar-fab[b-kbarzgd6xs] {
    display: none;
    position: fixed;
    right: 16px;
    bottom: calc(var(--bottom-tab-bar-height) + var(--help-trigger-size) + 24px);
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 56px;
    min-height: 56px;
    padding: 0 12px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--color-brand-yellow);
    color: var(--color-brand-yellow-text);
    box-shadow: var(--shadow-elevated);
    cursor: pointer;
    z-index: 20;
}

.sidebar-fab:focus-visible[b-kbarzgd6xs] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.sidebar-fab-count[b-kbarzgd6xs] {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 640px) {
    .sidebar-fab[b-kbarzgd6xs] {
        display: inline-flex;
    }
}
/* /Modules/VideoReview/Components/StatusControls.razor.rz.scp.css */
.status-controls[b-881944mz8p] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

[b-881944mz8p] .review-cta-ready {
    --accent-fill-rest: var(--color-brand-yellow);
    --accent-fill-hover: var(--color-brand-yellow);
    --accent-fill-active: var(--color-brand-yellow);
    --accent-foreground-rest: var(--color-brand-yellow-text);
    --accent-foreground-hover: var(--color-brand-yellow-text);
    --accent-foreground-active: var(--color-brand-yellow-text);
    min-height: 36px;
}

[b-881944mz8p] .status-controls-ghost-button {
    --neutral-stroke-rest: var(--color-on-stage-border);
    --neutral-foreground-rest: var(--color-text-on-brand);
    color: var(--color-text-on-brand);
    min-height: 36px;
}

[b-881944mz8p] .status-controls-ghost-button:hover {
    background: var(--color-on-stage-tint);
}

@media (pointer: coarse) {
    [b-881944mz8p] .review-cta-ready,
    [b-881944mz8p] .status-controls-ghost-button {
        min-height: 44px;
    }
}
/* /Modules/VideoReview/Components/TimelineMarker.razor.rz.scp.css */
.timeline-marker[b-i3s0050ji3] {
    position: absolute;
    top: 50%;
    left: var(--marker-position);
    transform: translate(-50%, -50%) scale(1);
    width: 14px;
    height: 14px;
    padding: 0;
    border: 2px solid var(--color-text-on-brand);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.timeline-marker[b-i3s0050ji3]::before {
    content: "";
    position: absolute;
    inset: -5px;
}

.timeline-marker--normal[b-i3s0050ji3] {
    background: var(--color-brand-yellow);
}

.timeline-marker--high[b-i3s0050ji3] {
    background: var(--color-brand-red);
}

.timeline-marker--done[b-i3s0050ji3] {
    background: var(--color-status-success-text);
    opacity: 0.6;
}

.timeline-marker:hover[b-i3s0050ji3],
.timeline-marker:focus-visible[b-i3s0050ji3],
.timeline-marker--active[b-i3s0050ji3] {
    transform: translate(-50%, -50%) scale(1.35);
}

.timeline-marker:focus-visible[b-i3s0050ji3] {
    outline: 2px solid var(--color-text-on-brand);
    outline-offset: 2px;
}

@media (pointer: coarse) {
    .timeline-marker[b-i3s0050ji3]::before {
        inset: -15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .timeline-marker[b-i3s0050ji3] {
        transition: none;
    }
}
/* /Modules/VideoReview/Components/VideoStage.razor.rz.scp.css */
/* Picture, comment timeline and transport bar are one object, so the rounding and the shadow belong to the
   composite and every part inside it stays square. Rounding the picture as well cut two notches out of the
   seam with whatever sat directly beneath it. */
.video-stage[b-4jgbrw89uc] {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-video);
    overflow: hidden;
}

.video-stage-frame[b-4jgbrw89uc] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--color-brand-stage);
    overflow: hidden;
}

/* The scrubber sits between the picture it seeks and the transport bar. */
.video-stage-timeline[b-4jgbrw89uc] {
    display: flex;
    flex-direction: column;
}

.video-stage-element[b-4jgbrw89uc] {
    width: 100%;
    height: 100%;
    display: block;
    background: var(--color-brand-stage);
}

.video-stage-visually-hidden[b-4jgbrw89uc] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.video-stage-error-panel[b-4jgbrw89uc] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    text-align: center;
    background: var(--color-brand-stage);
    color: var(--color-text-on-brand);
    font-family: var(--font-body);
}

.video-stage-error-message[b-4jgbrw89uc] {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
}

.video-stage-error-hint[b-4jgbrw89uc] {
    margin: 0;
    font-size: 13px;
    color: var(--color-on-stage-hint);
    max-width: 420px;
}

.video-stage-retry-button[b-4jgbrw89uc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 20px;
    margin-top: 6px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--color-brand-header);
    color: var(--color-text-on-brand);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.video-stage-retry-button:hover[b-4jgbrw89uc] {
    background: var(--color-brand-header-hover);
}

.video-stage-retry-button:focus-visible[b-4jgbrw89uc] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .video-stage-retry-button[b-4jgbrw89uc] {
        transition: none;
    }
}
/* /Modules/VideoReview/Pages/VideoReviewPage.razor.rz.scp.css */
.review-loading[b-56mc10n17h] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: calc(var(--space-4) * -1);
    padding: var(--space-4);
}

.review-loading-stage[b-56mc10n17h] {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    background: linear-gradient(90deg, var(--color-brand-stage) 25%, var(--color-on-stage-tint) 50%, var(--color-brand-stage) 75%);
    background-size: 200% 100%;
    animation: review-loading-shimmer-b-56mc10n17h 1.4s ease infinite;
}

.review-loading-cards[b-56mc10n17h] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.review-loading-card[b-56mc10n17h] {
    height: 64px;
    border-radius: var(--radius-md);
    background: linear-gradient(90deg, var(--color-bg-surface-alt) 25%, var(--color-bg-hover) 50%, var(--color-bg-surface-alt) 75%);
    background-size: 200% 100%;
    animation: review-loading-shimmer-b-56mc10n17h 1.4s ease infinite;
}

@keyframes review-loading-shimmer-b-56mc10n17h {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

.review-visually-hidden[b-56mc10n17h] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.review-load-error[b-56mc10n17h] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.review-load-error-actions[b-56mc10n17h] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.review-load-error-actions a[b-56mc10n17h] {
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.review-load-error-actions a:hover[b-56mc10n17h] {
    color: var(--color-brand-header);
    text-decoration: underline;
}

[b-56mc10n17h] .primary-action {
    --accent-fill-rest: var(--color-brand-header);
    --accent-fill-hover: var(--color-brand-header-hover);
    --accent-fill-active: var(--color-brand-header-hover);
}

[b-56mc10n17h] .danger-button {
    --accent-fill-rest: var(--color-danger);
    --accent-fill-hover: var(--color-brand-red);
}

/*
  Bounded to the height it is given, so the grid row cannot grow with the comment list. Unbounded, the whole
  content area scrolled and carried the video and the timeline off screen — the two things the comments are
  being read against.

  The height is the content box plus both of the host's paddings, which is exactly what the negative margin
  bleeds over: the shell then fills the padding box precisely and the host has nothing left to scroll.
*/
.review-shell[b-56mc10n17h] {
    /* One source for the panel's width: the grid column and the handle's offset have to agree, and they were
       two literals a moment ago. */
    --review-sidebar-width: 380px;

    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    height: calc(100% + var(--space-4) * 2);
    margin: calc(var(--space-4) * -1);
    background: var(--color-bg-surface);
    overflow: hidden;
}

.review-shell-main[b-56mc10n17h] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
}

.review-shell-alert[b-56mc10n17h] {
    padding: var(--space-3) var(--space-4) 0;
}

.review-shell-stage[b-56mc10n17h] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4);
}

.review-shell-backdrop[b-56mc10n17h] {
    display: none;
}

.review-shell-sidebar[b-56mc10n17h] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;

    /* The list scrolls here, inside the panel, and not by taking the page with it. */
    overflow-y: auto;
    background: var(--color-bg-elevated);
    border-left: 1px solid var(--color-border);
    outline: none;
}

/* Only rendered while the panel is a drawer, where it covers the top bar and the toggle that opened it. */
.review-shell-sidebar-close[b-56mc10n17h] {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    z-index: 1;
}

.review-shell-sidebar-close:hover[b-56mc10n17h] {
    background: var(--color-bg-hover);
}

.review-shell-sidebar-close:focus-visible[b-56mc10n17h] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

@media (min-width: 1024px) {
    .review-shell[b-56mc10n17h] {
        grid-template-columns: 1fr var(--review-sidebar-width);
    }

    .review-shell:not(.review-shell--sidebar-open)[b-56mc10n17h] {
        grid-template-columns: 1fr;
    }

    .review-shell:not(.review-shell--sidebar-open) .review-shell-sidebar[b-56mc10n17h] {
        display: none;
    }
}

@media (min-width: 641px) and (max-width: 1023px) {
    .review-shell-sidebar[b-56mc10n17h] {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(var(--review-sidebar-width), 100%);
        z-index: var(--layer-overlay);
        box-shadow: var(--shadow-elevated);
        transform: translateX(100%);
        transition: transform 0.2s ease;
    }

    .review-shell--sidebar-open .review-shell-sidebar[b-56mc10n17h] {
        transform: translateX(0);
    }

    .review-shell--sidebar-open .review-shell-backdrop[b-56mc10n17h] {
        display: block;
        position: fixed;
        inset: 0;
        background: var(--color-scrim);
        z-index: var(--layer-overlay-backdrop);
    }
}

@media (max-width: 640px) {
    .review-shell-sidebar[b-56mc10n17h] {
        position: fixed;
        inset: auto 0 0 0;
        max-height: 80dvh;
        border-left: none;
        border-top: 1px solid var(--color-border);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        transform: translateY(100%);
        transition: transform 0.2s ease;
        z-index: var(--layer-overlay);
    }

    .review-shell--sidebar-open .review-shell-sidebar[b-56mc10n17h] {
        transform: translateY(0);
    }

    .review-shell--sidebar-open .review-shell-backdrop[b-56mc10n17h] {
        display: block;
        position: fixed;
        inset: 0;
        background: var(--color-scrim);
        z-index: var(--layer-overlay-backdrop);
    }
}

@media (max-height: 540px) and (orientation: landscape) {
    .review-shell-sidebar[b-56mc10n17h] {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(320px, 70vw);
        max-height: none;
        border-radius: 0;
        border-top: none;
        border-left: 1px solid var(--color-border);
        transform: translateX(100%);
        z-index: var(--layer-overlay);
    }

    .review-shell--sidebar-open .review-shell-sidebar[b-56mc10n17h] {
        transform: translateX(0);
    }

    .review-shell--sidebar-open .review-shell-backdrop[b-56mc10n17h] {
        display: block;
        position: fixed;
        inset: 0;
        background: var(--color-scrim);
        z-index: var(--layer-overlay-backdrop);
    }
}

@media (prefers-reduced-motion: reduce) {
    .review-shell-sidebar[b-56mc10n17h] {
        transition: none;
    }

    .review-loading-stage[b-56mc10n17h],
    .review-loading-card[b-56mc10n17h] {
        animation: none;
    }
}

[b-56mc10n17h] .review-rename-dialog,
[b-56mc10n17h] .review-status-confirm-dialog {
    --dialog-width: min(90vw, 420px);
}

.review-rename-dialog-error[b-56mc10n17h] {
    display: block;
    margin-top: 6px;
    color: var(--color-status-danger-text);
    font-size: 12px;
}

/*
  The player stays mounted while the drawing editor is on the stage — hidden, not removed. Unmounting it would
  drop the playhead, the loaded buffer and the keyboard state, so closing the editor would restart the video
  from the beginning.
*/
.review-stage-player.is-hidden[b-56mc10n17h] {
    display: none;
}

/*
  Over the picture at the same size, because it *is* the picture: the frame the mark was drawn on, with the
  paused video showing the same frame underneath. Below the timeline in the stacking order, so the markers stay
  reachable while a still is shown.
*/
.review-stage-annotation[b-56mc10n17h] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

/*
  The handle rides the seam. Closed, the seam is the window's right edge; open, it is the panel's left edge —
  so the same element says "there is something here" and "here is where it goes" without a second control.

  Vertically centred rather than pinned to a corner, because the corners are taken: the bottom-right by the
  help button and the mobile tab bar, the top-right by the app header.
*/
.review-shell-handle[b-56mc10n17h] {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: var(--layer-overlay);
    display: none;
}

/* From the width at which the panel arrives from the right. Below that it is a bottom sheet and the floating
   button is the right affordance, so the handle stays out of the way. */
@media (min-width: 641px) {
    .review-shell-handle[b-56mc10n17h] {
        display: block;
    }
}

@media (min-width: 1024px) {
    .review-shell--sidebar-open .review-shell-handle[b-56mc10n17h] {
        right: var(--review-sidebar-width);
    }
}

/* The drawer overlays rather than taking a column, but the seam is in the same place either way. */
@media (min-width: 641px) and (max-width: 1023px) {
    .review-shell--sidebar-open .review-shell-handle[b-56mc10n17h] {
        right: min(var(--review-sidebar-width), 100%);
    }
}

/* Landscape on a phone: the drawer is narrower, so the seam is too. */
@media (max-height: 540px) and (orientation: landscape) {
    .review-shell--sidebar-open .review-shell-handle[b-56mc10n17h] {
        right: min(320px, 70vw);
    }
}
/* /Modules/VideoUpload/Components/DropZone.razor.rz.scp.css */
.drop-zone[b-ohczcakzfr] {
    position: relative;
    background: var(--color-brand-stage);
    border: 2px dashed var(--color-on-stage-border);
    border-radius: var(--radius-lg);
    padding: 40px 24px;
    text-align: center;
    transition: border-color 0.15s ease, background 0.15s ease;
    cursor: default;
    color: var(--color-text-on-brand);
    font-family: var(--font-body);
}

.drop-zone--drag-over[b-ohczcakzfr] {
    border-color: var(--color-brand-yellow);
    background: var(--color-on-stage-tint);
}

.drop-zone--disabled[b-ohczcakzfr] {
    opacity: 0.5;
    pointer-events: none;
}

.drop-zone__content[b-ohczcakzfr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.drop-zone__icon[b-ohczcakzfr] {
    font-size: 40px;
    line-height: 1;
    color: var(--color-text-on-brand);
}

.drop-zone__primary[b-ohczcakzfr] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-on-brand);
}

.drop-zone__secondary[b-ohczcakzfr] {
    margin: 0;
    font-size: 14px;
    color: var(--color-text-on-brand);
}

.drop-zone__hint[b-ohczcakzfr] {
    margin: 0;
    font-size: 12px;
    color: var(--color-on-stage-hint);
}

.drop-zone__browse[b-ohczcakzfr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    min-height: 44px;
    background: var(--color-brand-header);
    color: var(--color-text-on-brand);
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 8px;
    transition: background 0.15s ease;
    user-select: none;
}

.drop-zone__browse:hover[b-ohczcakzfr] {
    background: var(--color-brand-header-hover);
}

.drop-zone__browse:active[b-ohczcakzfr] {
    filter: brightness(.94);
}

.drop-zone__browse:focus-visible[b-ohczcakzfr],
.drop-zone__browse:focus-within[b-ohczcakzfr] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.drop-zone__browse--disabled[b-ohczcakzfr] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.drop-zone__input[b-ohczcakzfr] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.drop-zone__rejects[b-ohczcakzfr] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.drop-zone__rejects:has(.drop-zone__reject-chip)[b-ohczcakzfr] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-on-stage-divider);
}

.drop-zone__reject-chip[b-ohczcakzfr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--color-status-danger-bg);
    color: var(--color-status-danger-text);
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    max-width: 300px;
}

.drop-zone__reject-name[b-ohczcakzfr] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 160px;
}

.drop-zone__reject-reason[b-ohczcakzfr]::before {
    content: "— ";
}

@media (max-width: 640px) {
    .drop-zone[b-ohczcakzfr] {
        padding: 24px 16px;
    }

    .drop-zone__icon[b-ohczcakzfr] {
        font-size: 32px;
    }

    .drop-zone__primary[b-ohczcakzfr] {
        font-size: 15px;
    }
}
/* /Modules/VideoUpload/Components/FileUploadItem.razor.rz.scp.css */
@keyframes banner-in-b-0fln7vzrqp {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.file-upload-item[b-0fln7vzrqp] {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    font-family: var(--font-body);
    color: var(--color-text-primary);
}

.file-upload-item__main[b-0fln7vzrqp] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}

.file-upload-item__icon[b-0fln7vzrqp] {
    font-size: 22px;
    flex: 0 0 auto;
    line-height: 1;
}

.file-upload-item__info[b-0fln7vzrqp] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.file-upload-item__name[b-0fln7vzrqp] {
    font-weight: 600;
    font-family: var(--font-display);
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-upload-item__meta[b-0fln7vzrqp] {
    font-size: 12px;
    color: var(--color-text-secondary);
}

.file-upload-item__pill[b-0fln7vzrqp] {
    flex: 0 0 auto;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.file-upload-item--queued .file-upload-item__pill[b-0fln7vzrqp] {
    background: var(--color-bg-surface-alt);
    color: var(--color-text-muted);
}

.file-upload-item--uploading .file-upload-item__pill[b-0fln7vzrqp] {
    background: var(--color-status-warning-bg);
    color: var(--color-status-warning-text);
}

.file-upload-item--network-lost .file-upload-item__pill[b-0fln7vzrqp] {
    background: var(--color-status-warning-bg);
    color: var(--color-status-warning-text);
}

.file-upload-item--completed .file-upload-item__pill[b-0fln7vzrqp] {
    background: var(--color-status-success-bg);
    color: var(--color-status-success-text);
}

.file-upload-item--failed .file-upload-item__pill[b-0fln7vzrqp] {
    background: var(--color-status-danger-bg);
    color: var(--color-status-danger-text);
}

.file-upload-item--cancelled .file-upload-item__pill[b-0fln7vzrqp] {
    background: var(--color-bg-surface-alt);
    color: var(--color-text-muted);
}

.file-upload-item__actions[b-0fln7vzrqp] {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}

.file-upload-item__btn[b-0fln7vzrqp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 6px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.file-upload-item__btn:hover[b-0fln7vzrqp] {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.file-upload-item__btn:active[b-0fln7vzrqp] {
    filter: brightness(.94);
}

.file-upload-item__btn:focus-visible[b-0fln7vzrqp] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.file-upload-item__btn--retry[b-0fln7vzrqp] {
    background: var(--color-brand-header);
    color: var(--color-text-on-brand);
    border-color: var(--color-brand-header);
}

.file-upload-item__btn--retry:hover[b-0fln7vzrqp] {
    background: var(--color-brand-header-hover);
}

.file-upload-item__btn--retry:active[b-0fln7vzrqp] {
    filter: brightness(.94);
}

.file-upload-item__btn--retry:focus-visible[b-0fln7vzrqp] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.file-upload-item__progress-track[b-0fln7vzrqp] {
    height: 4px;
    background: var(--color-border);
    margin: 0 16px 12px;
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.file-upload-item__progress-bar[b-0fln7vzrqp] {
    height: 100%;
    width: var(--upload-progress, 0%);
    background: var(--color-accent);
    border-radius: var(--radius-pill);
    transition: width 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
    .file-upload-item__progress-bar[b-0fln7vzrqp] {
        transition: none;
    }
}

.file-upload-item__banner[b-0fln7vzrqp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    border-top: 1px solid var(--color-border);
    flex-wrap: wrap;
    animation: banner-in-b-0fln7vzrqp 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
    .file-upload-item__banner[b-0fln7vzrqp] {
        animation: none;
    }
}

.file-upload-item__banner--warning[b-0fln7vzrqp] {
    background: var(--color-status-warning-bg);
    color: var(--color-status-warning-text);
}

.file-upload-item__banner--danger[b-0fln7vzrqp] {
    background: var(--color-status-danger-bg);
    color: var(--color-status-danger-text);
}

.file-upload-item__banner-actions[b-0fln7vzrqp] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.file-upload-item__metadata[b-0fln7vzrqp] {
    padding: 12px 16px;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.file-upload-item__field[b-0fln7vzrqp] {
    display: flex;
    flex-direction: column;
}

@media (max-width: 640px) {
    .file-upload-item__main[b-0fln7vzrqp] {
        flex-wrap: wrap;
    }

    .file-upload-item__info[b-0fln7vzrqp] {
        flex-basis: calc(100% - 44px);
    }

    .file-upload-item__banner[b-0fln7vzrqp] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Modules/VideoUpload/Components/StorageConfigurationPrompt.razor.rz.scp.css */
.storage-prompt[b-rfaytuuk3y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 18px;
    margin-bottom: 18px;
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-status-warning-text);
    border-radius: var(--radius-md);
    background: var(--color-status-warning-bg);
    color: var(--color-status-warning-text);
    font-family: var(--font-body);
}

.storage-prompt--blocked[b-rfaytuuk3y] {
    border-left-color: var(--color-status-danger-text);
    background: var(--color-status-danger-bg);
    color: var(--color-status-danger-text);
}

.storage-prompt--checking[b-rfaytuuk3y] {
    border-left-color: var(--color-border-strong);
    background: var(--color-bg-surface-alt);
    color: var(--color-text-muted);
}

.storage-prompt-text[b-rfaytuuk3y] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.storage-prompt-title[b-rfaytuuk3y] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
}

.storage-prompt-body[b-rfaytuuk3y] {
    font-size: 13px;
    line-height: 1.5;
}

@media (max-width: 640px) {
    .storage-prompt[b-rfaytuuk3y] {
        flex-direction: column;
        align-items: stretch;
    }

    .storage-prompt-action[b-rfaytuuk3y] {
        width: 100%;
    }
}

.storage-prompt-host[b-rfaytuuk3y] {
    display: contents;
}
/* /Modules/VideoUpload/Components/UploadDialog.razor.rz.scp.css */
.upload-dialog-host[b-mxxcqknith] {
    display: contents;
}

[b-mxxcqknith] fluent-dialog {
    --dialog-width: min(90vw, 760px);
}
/* /Modules/VideoUpload/Components/UploadSummary.razor.rz.scp.css */
.upload-summary[b-w86bd8tsry] {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-family: var(--font-body);
    color: var(--color-text-primary);
}

.upload-summary__counts[b-w86bd8tsry] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.upload-summary__count[b-w86bd8tsry] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 24px;
    border-radius: var(--radius-md);
    min-width: 100px;
}

.upload-summary__count--success[b-w86bd8tsry] {
    background: var(--color-status-success-bg);
    color: var(--color-status-success-text);
}

.upload-summary__count--danger[b-w86bd8tsry] {
    background: var(--color-status-danger-bg);
    color: var(--color-status-danger-text);
}

.upload-summary__count-value[b-w86bd8tsry] {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
}

.upload-summary__count-label[b-w86bd8tsry] {
    font-size: 13px;
    font-weight: 600;
}

.upload-summary__failed-list[b-w86bd8tsry] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.upload-summary__failed-heading[b-w86bd8tsry] {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-status-danger-text);
}

.upload-summary__failed-item[b-w86bd8tsry] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    background: var(--color-status-danger-bg);
    border-radius: var(--radius-md);
    flex-wrap: wrap;
}

.upload-summary__failed-text[b-w86bd8tsry] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.upload-summary__failed-name[b-w86bd8tsry] {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-status-danger-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Wraps, unlike the file name: this is a sentence, and a truncated reason is no reason at all. */
.upload-summary__failed-reason[b-w86bd8tsry] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-status-danger-text);
}

.upload-summary__failed-actions[b-w86bd8tsry] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.upload-summary__retry-btn[b-w86bd8tsry] {
    min-height: 44px;
    min-width: 44px;
    padding: 6px 14px;
    background: var(--color-brand-header);
    color: var(--color-text-on-brand);
    border: none;
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s ease;
}

.upload-summary__retry-btn:hover[b-w86bd8tsry] {
    background: var(--color-brand-header-hover);
}

.upload-summary__retry-btn:active[b-w86bd8tsry] {
    filter: brightness(.94);
}

.upload-summary__retry-btn:focus-visible[b-w86bd8tsry] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.upload-summary__delete-btn[b-w86bd8tsry] {
    min-height: 44px;
    min-width: 44px;
    padding: 6px 14px;
    background: transparent;
    color: var(--color-status-danger-text);
    border: 1px solid var(--color-status-danger-text);
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s ease;
}

.upload-summary__delete-btn:hover[b-w86bd8tsry] {
    background: var(--color-bg-hover);
}

.upload-summary__delete-btn:active[b-w86bd8tsry] {
    filter: brightness(.94);
}

.upload-summary__delete-btn:focus-visible[b-w86bd8tsry] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.upload-summary__nav[b-w86bd8tsry] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.upload-summary__nav-btn[b-w86bd8tsry] {
    flex: 1;
    min-height: 44px;
    padding: 10px 20px;
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.12s ease, background 0.12s ease;
}

.upload-summary__nav-btn:focus-visible[b-w86bd8tsry] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.upload-summary__nav-btn--primary[b-w86bd8tsry] {
    background: var(--color-brand-header);
    color: var(--color-text-on-brand);
    border: none;
}

.upload-summary__nav-btn--primary:hover[b-w86bd8tsry] {
    background: var(--color-brand-header-hover);
}

.upload-summary__nav-btn--primary:active[b-w86bd8tsry] {
    filter: brightness(.94);
}

.upload-summary__nav-btn--secondary[b-w86bd8tsry] {
    background: transparent;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

.upload-summary__nav-btn--secondary:hover[b-w86bd8tsry] {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.upload-summary__nav-btn--secondary:active[b-w86bd8tsry] {
    filter: brightness(.94);
}

@media (max-width: 640px) {
    .upload-summary__nav[b-w86bd8tsry] {
        flex-direction: column;
    }
}
/* /Modules/VideoUpload/Components/UploadWorkspace.razor.rz.scp.css */
.upload-workspace[b-o8l03gijlf] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px 28px;
    font-family: var(--font-body);
    color: var(--color-text-primary);
    min-height: 0;
}

.upload-workspace--embedded[b-o8l03gijlf] {
    padding: 16px;
}

.upload-workspace__quota[b-o8l03gijlf] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    font-size: 13px;
    color: var(--color-text-secondary);
}

.upload-workspace__quota--exceeded[b-o8l03gijlf] {
    color: var(--color-status-danger-text);
    background: var(--color-status-danger-bg);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
}

.upload-workspace__quota-shortfall[b-o8l03gijlf] {
    font-weight: 600;
}

.upload-workspace__header[b-o8l03gijlf] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.upload-workspace__breadcrumb a[b-o8l03gijlf] {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

.upload-workspace__breadcrumb a:hover[b-o8l03gijlf] {
    color: var(--color-brand-header);
    text-decoration: underline;
}

.upload-workspace__breadcrumb a:active[b-o8l03gijlf] {
    filter: brightness(.88);
}

.upload-workspace__breadcrumb a:focus-visible[b-o8l03gijlf] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.upload-workspace__title[b-o8l03gijlf] {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    margin: 0;
    color: var(--color-text-primary);
}

.upload-workspace__drop-area[b-o8l03gijlf] {
    width: 100%;
}

/* One column: the files, then the watermark panel at full width beneath them. It used to be a 340px
   column beside the list, which squeezed the preview of the frame the watermark is drawn on into a strip. */
.upload-workspace__body[b-o8l03gijlf] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.upload-workspace__file-list[b-o8l03gijlf] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.upload-workspace__watermark-panel[b-o8l03gijlf] {
    min-width: 0;
}

.upload-workspace__panel-card[b-o8l03gijlf] {
    /* Elevated, not the page's own colour — a card painted in the background behind it stops reading as a card. */
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.upload-workspace__panel-header[b-o8l03gijlf] {
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-surface-alt);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.upload-workspace__panel-title[b-o8l03gijlf] {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    color: var(--color-text-primary);
}

.upload-workspace__watermark-toggle[b-o8l03gijlf] {
    display: none;
}

/* Across the full width the preview and the picker sit side by side; a stacked pair would make the panel
   taller than the file list above it. */
.upload-workspace__panel-body[b-o8l03gijlf] {
    padding: 16px 18px;
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    align-items: start;
    gap: 16px 24px;
}

@media (max-width: 768px) {
    .upload-workspace__panel-body[b-o8l03gijlf] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.upload-workspace__summary-host:focus[b-o8l03gijlf] {
    outline: none;
}

.upload-workspace__start-bar[b-o8l03gijlf] {
    display: flex;
    justify-content: flex-end;
}

.upload-workspace__start-btn[b-o8l03gijlf] {
    min-height: 44px;
    padding: 10px 28px;
    background: var(--color-brand-header);
    color: var(--color-text-on-brand);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.12s ease;
}

.upload-workspace__start-btn:hover[b-o8l03gijlf] {
    background: var(--color-brand-header-hover);
}

.upload-workspace__start-btn:active[b-o8l03gijlf] {
    filter: brightness(.94);
}

.upload-workspace__start-btn:focus-visible[b-o8l03gijlf] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.upload-workspace__start-btn:disabled[b-o8l03gijlf] {
    opacity: 0.45;
    cursor: not-allowed;
}

@media (max-width: 640px) {
    .upload-workspace[b-o8l03gijlf] {
        padding: 16px;
        gap: 14px;
    }

    .upload-workspace--embedded[b-o8l03gijlf] {
        padding: 12px;
    }

    .upload-workspace__title[b-o8l03gijlf] {
        font-size: 22px;
    }

    .upload-workspace__watermark-toggle[b-o8l03gijlf] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        min-width: 44px;
        padding: 4px;
        background: transparent;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        color: var(--color-text-secondary);
        cursor: pointer;
        transition: background 0.12s ease;
    }

    .upload-workspace__watermark-toggle:hover[b-o8l03gijlf] {
        background: var(--color-bg-hover);
    }

    .upload-workspace__watermark-toggle:active[b-o8l03gijlf] {
        filter: brightness(.94);
    }

    .upload-workspace__watermark-toggle:focus-visible[b-o8l03gijlf] {
        outline: 2px solid var(--color-border-focus);
        outline-offset: 2px;
    }

    .upload-workspace__watermark-panel--collapsed .upload-workspace__panel-body[b-o8l03gijlf] {
        display: none;
    }

    .upload-workspace__start-bar:not(.upload-workspace__start-bar--inline)[b-o8l03gijlf] {
        position: sticky;
        bottom: var(--bottom-tab-bar-height);
        background: var(--color-bg-surface);
        padding: 12px 0;
        border-top: 1px solid var(--color-border);
        z-index: 10;
    }

    .upload-workspace__start-btn[b-o8l03gijlf] {
        width: 100%;
    }
}

/* /Modules/VideoUpload/Components/WatermarkPicker.razor.rz.scp.css */
.watermark-picker[b-b87p5dq18s] {
    font-family: var(--font-body);
    color: var(--color-text-primary);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.watermark-picker__scope-note[b-b87p5dq18s] {
    font-size: 12px;
    color: var(--color-text-secondary);
    font-style: italic;
}

.watermark-picker__own-section[b-b87p5dq18s] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.watermark-picker__browse[b-b87p5dq18s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    min-height: 44px;
    background: var(--color-brand-header);
    color: var(--color-text-on-brand);
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease;
    user-select: none;
    position: relative;
}

.watermark-picker__browse:hover[b-b87p5dq18s] {
    background: var(--color-brand-header-hover);
}

.watermark-picker__browse:active[b-b87p5dq18s] {
    filter: brightness(.94);
}

.watermark-picker__browse:focus-visible[b-b87p5dq18s],
.watermark-picker__browse:focus-within[b-b87p5dq18s] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

[b-b87p5dq18s] .watermark-picker__file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.watermark-picker__hint[b-b87p5dq18s] {
    margin: 0;
    font-size: 12px;
    color: var(--color-text-secondary);
    font-style: italic;
}

.watermark-picker__error[b-b87p5dq18s] {
    margin: 0;
    font-size: 12px;
    color: var(--color-status-danger-text);
    font-weight: 600;
}

.watermark-picker__btn-save[b-b87p5dq18s] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 6px 14px;
    background: var(--color-brand-header);
    color: var(--color-text-on-brand);
    border: none;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.12s ease;
}

.watermark-picker__btn-save:hover[b-b87p5dq18s] {
    background: var(--color-brand-header-hover);
}

.watermark-picker__btn-save:active[b-b87p5dq18s] {
    filter: brightness(.94);
}

.watermark-picker__btn-save:focus-visible[b-b87p5dq18s] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.watermark-picker__btn-save:disabled[b-b87p5dq18s] {
    opacity: 0.45;
    cursor: not-allowed;
}
/* /Modules/VideoUpload/Components/WatermarkPreview.razor.rz.scp.css */
.watermark-preview[b-bagxe5e6oq] {
    width: 100%;
    font-family: var(--font-body);
}

.watermark-preview__stage[b-bagxe5e6oq] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--color-brand-stage);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.watermark-preview__thumbnail[b-bagxe5e6oq] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.watermark-preview__placeholder[b-bagxe5e6oq] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.watermark-preview__placeholder-text[b-bagxe5e6oq] {
    color: var(--color-text-on-brand);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    padding: 0 16px;
    opacity: 0.75;
}

@keyframes wm-overlay-reveal-b-bagxe5e6oq {
    from {
        opacity: 0;
        transform: scale(0.88);
    }
    to {
        opacity: 0.85;
        transform: scale(1);
    }
}

.watermark-preview__overlay[b-bagxe5e6oq] {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 28%;
    max-width: 120px;
    opacity: 0.85;
    pointer-events: none;
    animation: wm-overlay-reveal-b-bagxe5e6oq 0.35s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
    .watermark-preview__overlay[b-bagxe5e6oq] {
        animation: none;
    }
}
/* /Modules/VideoUpload/Components/WatermarkProgressDialog.razor.rz.scp.css */
.watermark-progress-root[b-lelu6c5onl] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    /* Above the mobile tab bar and its backdrop, from the shared stacking tokens rather than a local number. */
    z-index: var(--layer-overlay);
}

.watermark-progress-scrim[b-lelu6c5onl] {
    position: absolute;
    inset: 0;
    background: var(--color-scrim);
}

.watermark-progress-dialog[b-lelu6c5onl] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: min(560px, 100%);
    max-height: 100%;
    overflow-y: auto;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--color-bg-elevated);
    box-shadow: var(--shadow-elevated);
    font-family: var(--font-body);
    color: var(--color-text-primary);
}

.watermark-progress-title[b-lelu6c5onl] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
}

/* The sentence the dialog exists for. Stated as a warning, not a footnote. */
.watermark-progress-warning[b-lelu6c5onl] {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-status-warning-bg);
    color: var(--color-status-warning-text);
    font-size: 13px;
    font-weight: 600;
}

.watermark-progress-preview[b-lelu6c5onl] {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--color-brand-stage);
}

.watermark-progress-canvas[b-lelu6c5onl] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.watermark-progress-list[b-lelu6c5onl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.watermark-progress-item-head[b-lelu6c5onl] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: 4px;
}

.watermark-progress-name[b-lelu6c5onl] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
}

.watermark-progress-percent[b-lelu6c5onl] {
    flex: 0 0 auto;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
}

.watermark-progress-track[b-lelu6c5onl] {
    height: 8px;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--color-bg-surface);
}

/* The width is data, which is the one case a custom property on the element is the right answer. */
.watermark-progress-fill[b-lelu6c5onl] {
    width: var(--watermark-progress, 0%);
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--color-brand-header);
    transition: width 0.2s linear;
}

.watermark-progress-hint[b-lelu6c5onl] {
    margin: 0;
    font-size: 12px;
    color: var(--color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
    .watermark-progress-fill[b-lelu6c5onl] {
        transition: none;
    }
}
/* /Modules/VideoUpload/Pages/StorageSetup.razor.rz.scp.css */
.storage-setup-page[b-0yhxqiam2p] {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 820px;
    padding: 28px 32px;
    font-family: var(--font-body);
    color: var(--color-text-primary);
}

.storage-setup-header[b-0yhxqiam2p] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.storage-setup-title[b-0yhxqiam2p] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: -0.01em;
    margin: 0;
}

.storage-setup-subtitle[b-0yhxqiam2p] {
    font-size: 14px;
    color: var(--color-text-muted);
    margin: 0;
}

.storage-setup-skeleton[b-0yhxqiam2p] {
    height: 180px;
    border-radius: var(--radius-lg);
    background: var(--color-bg-surface-alt);
}

.storage-setup-card[b-0yhxqiam2p] {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.storage-setup-card-header[b-0yhxqiam2p] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 18px 22px 12px;
    border-bottom: 1px solid var(--color-border);
}

.storage-setup-card-title[b-0yhxqiam2p] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    margin: 0;
}

.storage-setup-card-body[b-0yhxqiam2p] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px 22px;
    font-size: 14px;
    line-height: 1.55;
}

.storage-setup-card-footer[b-0yhxqiam2p] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-surface-alt);
}

.storage-setup-badge[b-0yhxqiam2p] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.storage-setup-badge-success[b-0yhxqiam2p] {
    background: var(--color-status-success-bg);
    color: var(--color-status-success-text);
}

.storage-setup-badge-warning[b-0yhxqiam2p] {
    background: var(--color-status-warning-bg);
    color: var(--color-status-warning-text);
}

.storage-setup-notice[b-0yhxqiam2p] {
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-left-width: 4px;
    border-radius: var(--radius-md);
    font-size: 13px;
    line-height: 1.55;
}

.storage-setup-notice--warning[b-0yhxqiam2p] {
    border-left-color: var(--color-status-warning-text);
    background: var(--color-status-warning-bg);
    color: var(--color-status-warning-text);
}

.storage-setup-notice--error[b-0yhxqiam2p] {
    border-left-color: var(--color-status-danger-text);
    background: var(--color-status-danger-bg);
    color: var(--color-status-danger-text);
}

.storage-setup-notice--success[b-0yhxqiam2p] {
    border-left-color: var(--color-status-success-text);
    background: var(--color-status-success-bg);
    color: var(--color-status-success-text);
}

.storage-setup-notice--info[b-0yhxqiam2p] {
    border-left-color: var(--color-border-strong);
    background: var(--color-bg-surface-alt);
    color: var(--color-text-secondary);
}

.storage-setup-steps[b-0yhxqiam2p] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding-left: 20px;
}

.storage-setup-steps li[b-0yhxqiam2p] {
    padding-left: 4px;
}

.storage-setup-step-text[b-0yhxqiam2p] {
    display: block;
}

.storage-setup-link[b-0yhxqiam2p] {
    display: inline-block;
    margin-top: 4px;
    color: var(--color-link);
    font-weight: 600;
    text-decoration: underline;
}

.storage-setup-link:hover[b-0yhxqiam2p],
.storage-setup-link:focus-visible[b-0yhxqiam2p] {
    color: var(--color-link-hover);
}



.storage-setup-field[b-0yhxqiam2p] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.storage-setup-label[b-0yhxqiam2p] {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.storage-setup-input[b-0yhxqiam2p] {
    width: 100%;
}

.storage-setup-hint[b-0yhxqiam2p] {
    font-size: 12px;
    color: var(--color-text-muted);
}

/* The policy is meant to be copied verbatim, so it scrolls rather than wraps — a broken line would be pasted
   broken. */
.storage-setup-code[b-0yhxqiam2p] {
    margin: 6px 0;
    padding: 10px 12px;
    overflow-x: auto;
    font-size: 12px;
    line-height: 1.5;
    background: var(--color-bg-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
}

@media (max-width: 640px) {
    .storage-setup-page[b-0yhxqiam2p] {
        padding: 20px 16px;
    }

    .storage-setup-card-footer[b-0yhxqiam2p] {
        flex-direction: column-reverse;
    }

    .storage-setup-card-footer[b-0yhxqiam2p]  .fluent-button {
        width: 100%;
    }
}
/* /Modules/VideoUpload/Pages/UploadPage.razor.rz.scp.css */
.upload-page[b-4x3ti1rqpw] {
    display: contents;
}