/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-vakgribil8],
.components-reconnect-repeated-attempt-visible[b-vakgribil8],
.components-reconnect-failed-visible[b-vakgribil8],
.components-pause-visible[b-vakgribil8],
.components-resume-failed-visible[b-vakgribil8],
.components-rejoining-animation[b-vakgribil8] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-vakgribil8],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-vakgribil8],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-vakgribil8],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-vakgribil8],
#components-reconnect-modal.components-reconnect-retrying[b-vakgribil8],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-vakgribil8],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-vakgribil8],
#components-reconnect-modal.components-reconnect-failed[b-vakgribil8],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-vakgribil8] {
    display: block;
}


/* MudBlazor.min.css also styles this dialog: `background-color: var(--mud-palette-background) !important` (the
   canvas, not a card) and, below, an uppercase button with `margin: 40px auto !important`. The overrides that need
   it carry !important too; the scoped selector is the more specific one, so it wins. */
#components-reconnect-modal[b-vakgribil8] {
    background-color: var(--inf-surface) !important;
    color: var(--inf-text);
    font-family: var(--mud-typography-default-family);
    font-size: 0.9375rem;
    line-height: 1.5;
    width: 22rem;
    max-width: calc(100vw - 32px);
    margin: 20vh auto;
    padding: 2rem 1.75rem;
    border: 1px solid var(--inf-divider);
    border-radius: var(--inf-radius-lg);
    box-shadow: 0 16px 48px rgba(23, 43, 58, 0.2);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-vakgribil8 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-vakgribil8 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-vakgribil8 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-vakgribil8]::backdrop {
    background-color: rgba(16, 32, 44, 0.48);
    animation: components-reconnect-modal-fadeInOpacity-b-vakgribil8 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-vakgribil8 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-vakgribil8 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-vakgribil8 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-vakgribil8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-vakgribil8] {
    margin: 0;
    text-align: center;
}

/* Sentence case like every other button of the theme (MudBlazor's rule is uppercase and letter-spaced). */
#components-reconnect-modal button[b-vakgribil8] {
    min-height: 40px;
    border: 0;
    background-color: var(--inf-primary);
    color: var(--mud-palette-primary-text);
    font: inherit;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    margin: 0.25rem auto 0 !important;
    padding: 0 24px;
    border-radius: var(--inf-radius);
    cursor: pointer;
}

    #components-reconnect-modal button:hover[b-vakgribil8] {
        background-color: var(--inf-primary-emphasis);
    }

    #components-reconnect-modal button:active[b-vakgribil8] {
        background-color: var(--inf-primary-emphasis);
    }

    #components-reconnect-modal button:focus-visible[b-vakgribil8] {
        outline: 3px solid var(--inf-focus);
        outline-offset: 2px;
    }

.components-rejoining-animation[b-vakgribil8] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-vakgribil8] {
        position: absolute;
        border: 3px solid var(--inf-primary);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-vakgribil8 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-vakgribil8] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-vakgribil8 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Account/AccountCard.razor.rz.scp.css */
.acc-card-wrap[b-h3yc0f2jg9]  .acc-card {
    padding: 32px;
    border: 1px solid var(--inf-divider);
    border-radius: var(--inf-radius-lg);
    background: var(--inf-surface);
    box-shadow: 0 1px 3px rgba(23, 43, 58, 0.06);
}

.acc-card__head[b-h3yc0f2jg9] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

.acc-card__icon[b-h3yc0f2jg9] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
}

.acc-card__icon--primary[b-h3yc0f2jg9] { background: var(--inf-primary-tint); color: var(--inf-primary); }
.acc-card__icon--success[b-h3yc0f2jg9] { background: var(--inf-success-bg); color: var(--inf-success); }
.acc-card__icon--warning[b-h3yc0f2jg9] { background: var(--inf-warning-bg); color: var(--inf-warning); }
.acc-card__icon--error[b-h3yc0f2jg9] { background: var(--inf-error-bg); color: var(--inf-error); }
.acc-card__icon--info[b-h3yc0f2jg9] { background: var(--inf-info-bg); color: var(--inf-info); }
.acc-card__icon--neutral[b-h3yc0f2jg9] { background: var(--inf-neutral-bg); color: var(--inf-neutral); }
.acc-card__icon--accent[b-h3yc0f2jg9] { background: var(--inf-accent-bg); color: var(--inf-accent); }

.acc-card__heading[b-h3yc0f2jg9] {
    min-width: 0;
}

.acc-card-wrap[b-h3yc0f2jg9]  .acc-card__title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
}

.acc-card-wrap[b-h3yc0f2jg9]  .acc-card__subtitle {
    margin-top: 4px;
    color: var(--inf-text-2);
}

.acc-card__footer[b-h3yc0f2jg9] {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--inf-divider);
    font-size: 0.875rem;
    color: var(--inf-text-2);
}

@media (max-width: 599.98px) {
    .acc-card-wrap[b-h3yc0f2jg9]  .acc-card {
        padding: 24px 20px;
    }
}
/* /Components/Pages/Account/AccountField.razor.rz.scp.css */
/* The platform's outlined input (infodor.css «Inputs»), rebuilt for raw <input> elements: a label above, a 44 px
   white field with the input border, a teal border and soft ring on focus. */
.acc-field[b-b3mobyyzor] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
    max-width: var(--acc-field-max, none);
}

.acc-field[b-b3mobyyzor]  label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--inf-text);
}

.acc-field[b-b3mobyyzor]  input:not([type="checkbox"]):not([type="hidden"]) {
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--inf-input-border);
    border-radius: var(--inf-radius);
    background: var(--inf-surface);
    color: var(--inf-text);
    font: inherit;
    font-size: 1rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.acc-field[b-b3mobyyzor]  input:not([type="checkbox"]):hover {
    border-color: var(--inf-text-2);
}

.acc-field[b-b3mobyyzor]  input:not([type="checkbox"]):focus {
    outline: none;
    border-color: var(--inf-primary);
    box-shadow: 0 0 0 3px var(--inf-primary-tint-strong);
}

.acc-field[b-b3mobyyzor]  .mud-typography-caption {
    color: var(--inf-text-2);
}

.acc-field--inline[b-b3mobyyzor]  label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}

.acc-field--inline[b-b3mobyyzor]  input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--inf-primary);
    cursor: pointer;
}

.acc-field--inline[b-b3mobyyzor]  input[type="checkbox"]:focus-visible {
    outline: 3px solid var(--inf-focus);
    outline-offset: 2px;
}
/* /Components/Pages/Account/Denied.razor.rz.scp.css */
.acc-denied__path[b-sbhjfc329r] {
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--inf-neutral-bg);
    color: var(--inf-text);
    overflow-wrap: anywhere;
}

.acc-denied__actions[b-sbhjfc329r] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}
/* /Components/Pages/Account/Profile.razor.rz.scp.css */
/* The account facts beside the password form at desktop width, stacked below 1280 px. */
.profile-layout[b-x2hxg23bhn] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--inf-gap);
    align-items: start;
}

@media (max-width: 1279.98px) {
    .profile-layout[b-x2hxg23bhn] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.profile-facts dd[b-x2hxg23bhn] {
    margin: 0;
}

.profile-password[b-x2hxg23bhn] {
    --acc-field-max: 420px;
}
/* /Components/Pages/Acts/ActCreateDialog.razor.rz.scp.css */
/* «New act» dialog (DESIGN-ui-theme.md §5): outlined fields in a grid, defects in a bordered list. */

.act-dialog__title[b-1p4uy5ik0h] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.act-dialog__title[b-1p4uy5ik0h]  .act-dialog__title-icon {
    color: var(--inf-primary);
}

.act-dialog__defects[b-1p4uy5ik0h] {
    margin-top: 16px;
    border: 1px solid var(--inf-divider);
    border-radius: var(--inf-radius);
    overflow: hidden;
}

[b-1p4uy5ik0h] .act-dialog__defects-head {
    padding: 8px 12px;
    background: var(--inf-surface-muted);
    border-bottom: 1px solid var(--inf-divider);
}

.act-dialog__defects-list[b-1p4uy5ik0h] {
    max-height: 220px;
    overflow-y: auto;
    padding: 4px;
}
/* /Components/Pages/Acts/ActList.razor.rz.scp.css */
/* Acts list (DESIGN-ui-theme.md §5, mockups cus-04 / mgr-06). */

.act-filter[b-5d2aku29mi] {
    flex: 0 1 280px;
    min-width: 200px;
}

.act-number[b-5d2aku29mi] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.act-number[b-5d2aku29mi]  .act-number__icon {
    color: var(--inf-primary);
}

.act-number__text[b-5d2aku29mi] {
    font-weight: 600;
}

@media (max-width: 599.98px) {
    .act-filter[b-5d2aku29mi] {
        flex: 1 1 100%;
    }
}

/* Five tiles on a phone: the total spans the row, the four status tiles sit 2 × 2; long labels wrap. */

@media (max-width: 599.98px) {
    .inf-kpi-row[b-5d2aku29mi]  .inf-kpi:first-child { grid-column: 1 / -1; }
    .inf-kpi-row[b-5d2aku29mi]  .inf-kpi__label { hyphens: auto; overflow-wrap: anywhere; }
}
/* /Components/Pages/Admin/Audit.razor.rz.scp.css */
/* Nine filters: a responsive grid, four to a row on a desktop, one on a phone. */
.audit-filters[b-8n9lxwxbbx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px 16px;
}

.audit-action[b-8n9lxwxbbx] {
    font-size: 0.8125rem;
    color: var(--inf-text);
    background: var(--inf-neutral-bg);
    padding: 1px 6px;
    border-radius: 4px;
    /* An action code is one identifier («vision.verdict_set»): it never breaks mid-word. The longest code of the
       closed set (AuditActions, 27 characters) still fits the stacked card at 390 px. */
    white-space: nowrap;
}

.audit-page[b-8n9lxwxbbx]  .audit-entity-id {
    overflow-wrap: anywhere;
}

.audit-payload-row > td[b-8n9lxwxbbx] {
    padding: 0 16px 12px 56px;
    border-bottom: 1px solid var(--inf-divider-soft);
}

.audit-payload[b-8n9lxwxbbx] {
    margin: 0;
    padding: 12px 14px;
    background: var(--inf-surface-muted);
    border: 1px solid var(--inf-divider);
    border-radius: var(--inf-radius);
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--inf-text);
}

@media (max-width: 599.98px) {
    .audit-payload-row > td[b-8n9lxwxbbx] {
        padding-left: 12px;
        padding-right: 12px;
    }
}
/* /Components/Pages/Admin/Gibdd.razor.rz.scp.css */
/* /admin/gibdd: the sync form wraps on a narrow screen; the tables scroll inside their panels. */
.gibdd-form[b-29psrdf5nk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.gibdd-form[b-29psrdf5nk]  .gibdd-form__region {
    flex: 1 1 320px;
    min-width: 0;
}

.gibdd-form[b-29psrdf5nk]  .gibdd-form__period {
    flex: 0 1 240px;
    min-width: 0;
}

.gibdd-actions[b-29psrdf5nk] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.gibdd-page[b-29psrdf5nk]  .mud-table-container {
    overflow-x: auto;
}
/* /Components/Pages/Admin/Organizations.razor.rz.scp.css */
/* The filter row of mockup adm-08: a wide search, then the two facets; they wrap to one per line on a phone. */
.org-filters[b-dhw02l1x6e]  .org-filters__search {
    flex: 2 1 320px;
    min-width: 0;
}

.org-filters[b-dhw02l1x6e]  .org-filters__facet {
    flex: 1 1 200px;
    min-width: 0;
}

.org-page[b-dhw02l1x6e]  .org-name {
    font-weight: 600;
}

.org-page[b-dhw02l1x6e]  .org-actions {
    width: 56px;
    text-align: right;
}
/* /Components/Pages/Admin/Settings.razor.rz.scp.css */
/* Mockup adm-10: the section tabs in a white strip, the active section on the left and the storage note beside it
   (stacked below 1280 px). */
.settings-page[b-lajv8tp3id]  .settings-tabs {
    background: var(--inf-surface);
    border: 1px solid var(--inf-divider);
    border-radius: var(--inf-radius);
    overflow: hidden;
}

.settings-page[b-lajv8tp3id]  .settings-tabs .mud-tabs-tabbar {
    border-bottom: 0;
}

.settings-page[b-lajv8tp3id]  .settings-tabs .mud-tab {
    min-height: 52px;
    padding-left: 18px;
    padding-right: 18px;
}

.settings-layout[b-lajv8tp3id] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    gap: var(--inf-gap);
    align-items: start;
}

.settings-main[b-lajv8tp3id],
.settings-side[b-lajv8tp3id] {
    min-width: 0;
}

@media (max-width: 1279.98px) {
    .settings-layout[b-lajv8tp3id] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The save controls close each section, separated from its fields by a divider. */
.settings-footer[b-lajv8tp3id] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--inf-divider);
}

.settings-footer--flush[b-lajv8tp3id] {
    margin-top: 12px;
    padding-top: 0;
    border-top: 0;
}

/* The APK picker: a labelled native file input styled like the other controls. */
.settings-apk[b-lajv8tp3id] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.settings-apk__label[b-lajv8tp3id] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--inf-text);
}

.settings-apk[b-lajv8tp3id]  input[type="file"] {
    max-width: 100%;
    padding: 8px;
    border: 1px dashed var(--inf-input-border);
    border-radius: var(--inf-radius);
    background: var(--inf-surface-muted);
    color: var(--inf-text);
    font: inherit;
    font-size: 0.875rem;
}

.settings-apk[b-lajv8tp3id]  input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 8px 14px;
    border: 1px solid var(--inf-primary);
    border-radius: 6px;
    background: var(--inf-surface);
    color: var(--inf-primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.settings-apk[b-lajv8tp3id]  input[type="file"]:disabled::file-selector-button {
    opacity: 0.5;
    cursor: default;
}

.settings-releases[b-lajv8tp3id] {
    margin-top: 20px;
    border: 1px solid var(--inf-divider);
    border-radius: var(--inf-radius);
    overflow-x: auto;
}

.settings-releases th[b-lajv8tp3id],
.settings-releases td[b-lajv8tp3id] {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.settings-releases__actions[b-lajv8tp3id] {
    text-align: right;
    white-space: nowrap;
}

.settings-page[b-lajv8tp3id]  .settings-stored td {
    font-size: 0.8125rem;
}

.settings-page[b-lajv8tp3id]  .settings-stored td:first-child {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* /Components/Pages/Admin/Skdf.razor.rz.scp.css */
/* The stored-parts figure beside the import form; one column on a narrow screen. */
.skdf-top[b-d5ygwuqiex] {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr);
    gap: var(--inf-gap);
    align-items: start;
}

@media (max-width: 959.98px) {
    .skdf-top[b-d5ygwuqiex] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.skdf-actions[b-d5ygwuqiex] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.skdf-geometry-row[b-d5ygwuqiex] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.skdf-geometry-row[b-d5ygwuqiex]  .skdf-geometry-row__regions {
    flex: 1 1 320px;
    min-width: 0;
}

.skdf-geometry-run[b-d5ygwuqiex] {
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid var(--inf-divider);
    border-radius: var(--inf-radius);
    background: var(--inf-surface-muted);
}

.skdf-page[b-d5ygwuqiex]  .skdf-kind {
    font-weight: 600;
}

.skdf-log-row > td[b-d5ygwuqiex] {
    padding: 0 16px 10px;
    border-bottom: 1px solid var(--inf-divider-soft);
}

.skdf-stamp > span[b-d5ygwuqiex] {
    display: block;
    white-space: nowrap;
}

/* DESIGN-improve-20261015.md §3 D «Данные СКДФ по участкам». */
.skdf-roaddata-form[b-d5ygwuqiex] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.skdf-roaddata-form[b-d5ygwuqiex]  .skdf-roaddata-form__regions,
.skdf-roaddata-form[b-d5ygwuqiex]  .skdf-roaddata-form__road {
    max-width: 640px;
    min-width: 0;
}

.skdf-roaddata-parts[b-d5ygwuqiex] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
}

.skdf-roaddata-diff[b-d5ygwuqiex] {
    max-height: 420px;
    overflow: auto;
}
/* /Components/Pages/Admin/Users.razor.rz.scp.css */
/* Mockup adm-09: the status tabs sit in a white bordered strip; the count badge reads as a small pill after the
   caption instead of floating over its corner. */
.users-page[b-0mh0ktkp5b]  .users-tabs {
    background: var(--inf-surface);
    border: 1px solid var(--inf-divider);
    border-radius: var(--inf-radius);
    overflow: hidden;
}

.users-page[b-0mh0ktkp5b]  .users-tabs .mud-tabs-tabbar {
    border-bottom: 0;
}

.users-page[b-0mh0ktkp5b]  .users-tabs .mud-tab {
    min-height: 52px;
    padding-left: 20px;
    padding-right: 28px;
}

.users-page[b-0mh0ktkp5b]  .users-tabs .mud-tab-badge,
.users-page[b-0mh0ktkp5b]  .users-tabs .mud-tab-badge .mud-badge-wrapper {
    position: static;
    display: inline-flex;
    width: auto;
    height: auto;
}

.users-page[b-0mh0ktkp5b]  .users-tabs .mud-tab-badge .mud-badge {
    position: static;
    inset: auto;
    height: 22px;
    min-width: 24px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* The count pill reads as dark text on its tint, like every chip (§2.1). */
.users-page[b-0mh0ktkp5b]  .users-tabs .mud-badge.mud-theme-success { background: var(--inf-success-bg); color: var(--inf-success); }
.users-page[b-0mh0ktkp5b]  .users-tabs .mud-badge.mud-theme-warning { background: var(--inf-warning-bg); color: var(--inf-warning); }
.users-page[b-0mh0ktkp5b]  .users-tabs .mud-badge.mud-badge-default,
.users-page[b-0mh0ktkp5b]  .users-tabs .mud-badge.mud-theme-default { background: var(--inf-neutral-bg); color: var(--inf-neutral); }

/* Four tiles share the row instead of leaving a fifth empty slot. */
@media (min-width: 600px) {
    .users-kpis[b-0mh0ktkp5b] {
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    }
}

.users-filters[b-0mh0ktkp5b]  .users-filters__search {
    flex: 1 1 360px;
    max-width: 640px;
    min-width: 0;
}

.users-page[b-0mh0ktkp5b]  .users-person {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.users-page[b-0mh0ktkp5b]  .users-person__avatar {
    flex: 0 0 auto;
    margin-top: 2px;
}

.users-page[b-0mh0ktkp5b]  .users-person__text {
    min-width: 0;
}

.users-page[b-0mh0ktkp5b]  .users-person__name {
    font-weight: 600;
}

.users-page[b-0mh0ktkp5b]  .users-actions {
    width: 56px;
    text-align: right;
}

.users-page[b-0mh0ktkp5b]  .users-nowrap {
    white-space: nowrap;
}
/* /Components/Pages/Admin/Workers.razor.rz.scp.css */
.workers-page[b-zsdrnyr1gj]  .workers-name {
    font-weight: 600;
}

/* The build hash after the host is long: it may break anywhere rather than widen the column. */
.workers-page[b-zsdrnyr1gj]  .workers-version {
    display: block;
    max-width: 260px;
    overflow-wrap: anywhere;
}

.workers-page[b-zsdrnyr1gj]  .workers-nowrap {
    white-space: nowrap;
}

.workers-code[b-zsdrnyr1gj] {
    font-size: 0.8125rem;
    white-space: nowrap;
}

.workers-page[b-zsdrnyr1gj]  .workers-actions {
    width: 56px;
    text-align: right;
}

/* The key shown exactly once: a quiet code block with the copy button beside it. */
.workers-key[b-zsdrnyr1gj] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--inf-surface-muted);
    border: 1px solid var(--inf-divider);
    border-radius: var(--inf-radius);
}

.workers-key__value[b-zsdrnyr1gj] {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-all;
    font-size: 0.875rem;
}

/* Four tiles share the row instead of leaving a fifth empty slot. */
@media (min-width: 600px) {
    .workers-kpis[b-zsdrnyr1gj] {
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    }
}

/* Stacked table (< md, MudTable Breakpoint.Md): each cell is a label + value flex row. Multi-line values and the
   capability chips are one block each (see the markup), aligned to the right edge like the single-line values. */
@media (max-width: 959.98px) {
    .workers-stack[b-zsdrnyr1gj] {
        min-width: 0;
        text-align: end;
    }

    .workers-capabilities[b-zsdrnyr1gj] {
        justify-content: flex-end;
    }

    .workers-page[b-zsdrnyr1gj]  .workers-version {
        margin-inline-start: auto;
    }
}
/* /Components/Pages/Contracts/ContractEdit.razor.rz.scp.css */
/* Contract page (DESIGN-ui-theme.md §5, mockups adm-04 / cus-07): facts strip, tabs, section panels. */

.contract-fact__text[b-jnmfp2zkmt] {
    min-width: 0;
}

.contract-facts[b-jnmfp2zkmt] {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Tabs sit on the canvas; the panels below them are the white cards. */
.contract-page[b-jnmfp2zkmt]  .contract-tabs .mud-tabs-tabbar {
    background: transparent;
}

.contract-page[b-jnmfp2zkmt]  .contract-tabs__panels {
    padding-top: 16px;
}

/* Non-table content of a flush panel (empty text, the overlap warning). */
.contract-pad[b-jnmfp2zkmt] {
    padding: 0 16px 16px;
}

.contract-pad + .contract-pad[b-jnmfp2zkmt] {
    padding-top: 0;
}

.contract-form__footer[b-jnmfp2zkmt] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

/* Edge-to-edge tables inside flush panels scroll sideways on a phone instead of the page. */
.contract-page[b-jnmfp2zkmt]  .contract-table {
    border-radius: 0 0 var(--inf-radius) var(--inf-radius);
    overflow-x: auto;
}

.contract-page[b-jnmfp2zkmt]  .contract-table table {
    min-width: 680px;
}

.contract-page[b-jnmfp2zkmt]  .contract-table td.contract-table__nowrap,
.contract-page[b-jnmfp2zkmt]  .contract-table td.inf-num {
    white-space: nowrap;
}

.contract-page[b-jnmfp2zkmt]  .contract-table td.contract-table__select {
    min-width: 180px;
}

.contract-page[b-jnmfp2zkmt]  .contract-table .mud-input-control {
    margin-top: 0;
}
/* /Components/Pages/Contracts/Contracts.razor.rz.scp.css */
/* Contracts list (DESIGN-ui-theme.md §5, mockups adm-04 / cus-07). */

.contracts-search[b-0pis4s37sa] {
    flex: 1 1 320px;
    max-width: 520px;
}

.contract-number[b-0pis4s37sa] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.contract-number[b-0pis4s37sa]  .contract-number__icon {
    color: var(--inf-primary);
}

.contract-number[b-0pis4s37sa]  .contract-number__link {
    font-weight: 600;
}

/* A term breaks between its two dates, never inside one, so the table fits without a sideways scroll. */
.contract-date[b-0pis4s37sa] {
    white-space: nowrap;
}

/* Five tiles on a phone: the total spans the row, the four status tiles sit 2 × 2; long labels wrap. */

@media (max-width: 599.98px) {
    .inf-kpi-row[b-0pis4s37sa]  .inf-kpi:first-child { grid-column: 1 / -1; }
    .inf-kpi-row[b-0pis4s37sa]  .inf-kpi__label { hyphens: auto; overflow-wrap: anywhere; }
    /* «Приостановлены» is the longest status word: a slightly tighter tile keeps it on one line at 390 px. */
    .inf-kpi-row[b-0pis4s37sa]  .inf-kpi { padding: 12px 10px; gap: 8px; }
    .inf-kpi-row[b-0pis4s37sa]  .inf-kpi__icon { width: 32px; height: 32px; }
}
/* /Components/Pages/Contracts/RoadPickerDialog.razor.rz.scp.css */
/* Road picker (DESIGN-ui-theme.md §5): bordered result table, the picked part's window in a tinted box. */

[b-bzv29e0le4] .road-picker__table {
    border: 1px solid var(--inf-divider);
    border-radius: var(--inf-radius);
    overflow: hidden;
}

.road-picker__selected[b-bzv29e0le4] {
    margin-top: 16px;
    padding: 12px 16px 8px;
    border: 1px solid var(--inf-primary-tint-strong);
    border-radius: var(--inf-radius);
    background: var(--inf-primary-tint);
}

.road-picker__selected-head[b-bzv29e0le4] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.road-picker__selected-head[b-bzv29e0le4]  .road-picker__selected-icon {
    color: var(--inf-primary);
}
/* /Components/Pages/Defects/DefectCreate.razor.rz.scp.css */
/* /defects/new in the ИНФОДОР style: the form beside the point picker map, one column below 960 px. */
.dc-grid[b-e1xmksjv1o] {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--inf-gap);
    align-items: start;
}

@media (max-width: 959.98px) {
    .dc-grid[b-e1xmksjv1o] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.dc-form[b-e1xmksjv1o] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dc-page[b-e1xmksjv1o]  .dc-form .mud-input-control {
    margin-top: 0;
}

.dc-pair[b-e1xmksjv1o] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.dc-actions[b-e1xmksjv1o] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--inf-divider-soft);
}

.dc-map[b-e1xmksjv1o] {
    height: 520px;
    width: 100%;
    overflow: hidden;
    border-radius: 0 0 var(--inf-radius) var(--inf-radius);
    background: var(--inf-surface-muted);
    color: var(--inf-text-2);
}

@media (max-width: 959.98px) {
    .dc-map[b-e1xmksjv1o] {
        height: 340px;
    }
}
/* /Components/Pages/Defects/DefectDetail.razor.rz.scp.css */
/* /defects/{id} in the ИНФОДОР style (DESIGN-ui-theme.md §5.4, mockups adm-05 detail and mgr-03). */

.dd-alerts[b-rhxki24emx] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.dd-alerts:empty[b-rhxki24emx] {
    display: none;
}

.dd-alert-link[b-rhxki24emx] {
    color: inherit;
    font-weight: 600;
}

/* Action bar: the workflow's buttons in one wrapping row. */
.dd-action-row[b-rhxki24emx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

@media (max-width: 599.98px) {
    .dd-action-row[b-rhxki24emx]  .mud-button-root {
        flex: 1 1 100%;
    }
}

/* Two columns from 1100 px: the evidence and facts on the left, map / logs on the right. */
.dd-grid[b-rhxki24emx] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
    gap: var(--inf-gap);
    align-items: start;
    margin-bottom: var(--inf-gap);
}

@media (max-width: 1099.98px) {
    .dd-grid[b-rhxki24emx] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Photos: one block per phase (до / после / прочее), its upload button on the heading row. */
.dd-phase + .dd-phase[b-rhxki24emx] {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--inf-divider-soft);
}

.dd-phase__head[b-rhxki24emx] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
    min-height: 32px;
}

.dd-page[b-rhxki24emx]  .dd-phase__title.mud-typography {
    margin: 0;
    color: var(--inf-text);
}

.dd-phase__count[b-rhxki24emx] {
    min-width: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--inf-neutral-bg);
    color: var(--inf-neutral);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
}

.dd-page[b-rhxki24emx]  .dd-phase__upload {
    margin-left: auto;
}

.dd-thumbs[b-rhxki24emx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}

.dd-thumb[b-rhxki24emx] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 128px;
    border: 1px solid var(--inf-divider);
    border-radius: var(--inf-radius);
    background: var(--inf-surface-muted);
    overflow: hidden;
}

.dd-thumb[b-rhxki24emx]  .di-open {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    border-radius: 0;
}

@media (max-width: 599.98px) {
    .dd-thumbs[b-rhxki24emx] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Deadlines as facts. */
.dd-facts[b-rhxki24emx] {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.dd-fact[b-rhxki24emx] {
    min-width: 0;
}

.dd-overdue[b-rhxki24emx] {
    font-weight: 600;
}

.dd-page[b-rhxki24emx]  .dd-fact-chip.mud-chip {
    margin: 2px 0 0;
}

/* Discussion. */
.dd-messages[b-rhxki24emx] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dd-message[b-rhxki24emx] {
    padding: 8px 12px;
    border-radius: var(--inf-radius);
    background: var(--inf-surface-muted);
    border: 1px solid var(--inf-divider-soft);
    overflow-wrap: anywhere;
}

.dd-attachments[b-rhxki24emx] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.dd-compose[b-rhxki24emx] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.dd-page[b-rhxki24emx]  .dd-compose__field {
    flex: 1 1 auto;
    margin: 0;
}

/* Map: edge to edge in its panel, rounded at the bottom like the panel. */
.dd-map[b-rhxki24emx] {
    height: 280px;
    width: 100%;
    overflow: hidden;
    border-radius: 0 0 var(--inf-radius) var(--inf-radius);
    background: var(--inf-surface-muted);
    color: var(--inf-text-2);
}

/* Event log: compact timeline, scrolling inside the panel past ~10 entries. */
.dd-events[b-rhxki24emx] {
    max-height: 560px;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: -4px -8px -8px -8px;
    padding: 4px 8px 8px 8px;
}

.dd-events:focus-visible[b-rhxki24emx] {
    outline: 3px solid var(--inf-focus);
    outline-offset: -3px;
    border-radius: var(--inf-radius);
}

.dd-page[b-rhxki24emx]  .dd-timeline.mud-timeline {
    padding-top: 0;
}

.dd-page[b-rhxki24emx]  .dd-timeline .mud-timeline-item {
    padding-bottom: 10px;
}

.dd-page[b-rhxki24emx]  .dd-timeline .mud-timeline-item-content {
    padding-bottom: 0;
}

.dd-calls[b-rhxki24emx] {
    max-width: 100%;
    overflow-x: auto;
}
/* /Components/Pages/Defects/DefectHistory.razor.rz.scp.css */
/* DESIGN-review-and-verification.md §4.3 — «История изменений». Fixed layout so a long value wraps
   inside its cell instead of widening the page on a phone. */
.dh-wrap[b-99h2mgahy9] {
    max-width: 100%;
    overflow-x: auto;
}

.dh-wrap[b-99h2mgahy9]  table {
    table-layout: fixed;
    width: 100%;
}

.dh-wrap[b-99h2mgahy9]  th.dh-when,
.dh-wrap[b-99h2mgahy9]  td.dh-when {
    width: 140px;
    white-space: nowrap;
}

.dh-wrap[b-99h2mgahy9]  th.dh-who,
.dh-wrap[b-99h2mgahy9]  td.dh-who {
    width: 190px;
}

.dh-wrap[b-99h2mgahy9]  td {
    vertical-align: top;
    overflow-wrap: anywhere;
}

.dh-wrap[b-99h2mgahy9]  .dh-line + .dh-line {
    margin-top: 2px;
}

/* Phone: each entry becomes a block — «date · user» as a caption line, the changes below — instead of three
   squeezed columns that broke dates and names mid-word. */
@media (max-width: 600px) {
    .dh-wrap[b-99h2mgahy9]  table,
    .dh-wrap[b-99h2mgahy9]  tbody,
    .dh-wrap[b-99h2mgahy9]  tr,
    .dh-wrap[b-99h2mgahy9]  td {
        display: block;
        width: auto;
    }

    .dh-wrap[b-99h2mgahy9]  thead {
        display: none;
    }

    .dh-wrap[b-99h2mgahy9]  tr {
        padding: 10px 0;
        border-bottom: 1px solid var(--inf-divider-soft);
    }

    .dh-wrap[b-99h2mgahy9]  td {
        border-bottom: 0 !important;
        padding: 0 !important;
        height: auto !important;
    }

    .dh-wrap[b-99h2mgahy9]  td.dh-when,
    .dh-wrap[b-99h2mgahy9]  td.dh-who {
        display: inline;
        width: auto;
        white-space: nowrap;
        font-size: 0.75rem;
        color: var(--inf-text-2);
    }

    .dh-wrap[b-99h2mgahy9]  td.dh-who::before {
        content: " · ";
    }

    .dh-wrap[b-99h2mgahy9]  td:last-child {
        margin-top: 2px;
    }
}
/* /Components/Pages/Defects/DefectKpiToggle.razor.rz.scp.css */
/* A KPI tile that is a toggle button: inf-kpi (infodor.css) supplies the look; this resets the button and adds the
   hover / pressed / focus states. MudBlazor's button reset centres a button's flex content (justify-content: center),
   which would shift the icon by the label's width from tile to tile; pin it to the start edge like Shared/Ui/KpiTile. */
.dkt[b-zg9cfcgimb] {
    width: 100%;
    margin: 0;
    font: inherit;
    justify-content: flex-start;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.12s ease, background-color 0.12s ease;
}

.dkt:hover[b-zg9cfcgimb] {
    border-color: var(--inf-primary);
}

.dkt:focus-visible[b-zg9cfcgimb] {
    outline: 3px solid var(--inf-focus);
    outline-offset: 2px;
}

.dkt--active[b-zg9cfcgimb] {
    border-color: var(--inf-primary);
    background: var(--inf-primary-tint);
    box-shadow: inset 0 0 0 1px var(--inf-primary);
}

.dkt .inf-kpi__hint[b-zg9cfcgimb] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.dkt--active .inf-kpi__hint[b-zg9cfcgimb] {
    color: var(--inf-primary-emphasis);
    font-weight: 600;
}

.dkt[b-zg9cfcgimb]  .dkt-check.mud-icon-root {
    font-size: 1rem;
}

/* Labels may wrap to two lines («Требуют подтверждения»); the figures still line up at the bottom of the row. */
.dkt .inf-kpi__text[b-zg9cfcgimb] {
    align-self: stretch;
    justify-content: space-between;
}
/* /Components/Pages/Defects/DefectList.razor.rz.scp.css */
/* /defects in the ИНФОДОР style (DESIGN-ui-theme.md §5, mockup adm-05). */

/* KPI row: five tiles side by side on a desktop, two per row on a phone (inf-kpi-row). */
.dl-kpis[b-swm6arjpji] {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

@media (max-width: 599.98px) {
    .dl-kpis[b-swm6arjpji] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* An odd last tile takes the whole row instead of leaving a hole. */
    .dl-kpis[b-swm6arjpji]  .inf-kpi:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

/* Filter panel: search first, the facets, the dates, reset at the end; the quick toggles below a hairline. */
.dl-search[b-swm6arjpji] {
    flex: 1 1 300px;
    min-width: 220px;
    max-width: 440px;
}

.dl-dates[b-swm6arjpji] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.dl-dates[b-swm6arjpji]  .dl-date {
    width: 164px;
    flex: 0 0 auto;
}

.dl-toggles[b-swm6arjpji] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--inf-divider-soft);
}

@media (max-width: 599.98px) {
    .dl-search[b-swm6arjpji] {
        flex-basis: 100%;
        max-width: none;
        min-width: 0;
    }

    .dl-dates[b-swm6arjpji] {
        width: 100%;
    }

    .dl-dates[b-swm6arjpji]  .dl-date {
        width: auto;
        flex: 1 1 140px;
    }
}

/* Results panel: «Найдено: N» as the panel title, the sort select on the right. */
.dl-page[b-swm6arjpji]  .dl-found.mud-typography {
    color: var(--inf-primary-emphasis);
    font-variant-numeric: tabular-nums;
}

.dl-page[b-swm6arjpji]  .dl-sort {
    min-width: 260px;
    margin: 0;
}

@media (max-width: 599.98px) {
    .dl-page[b-swm6arjpji]  .dl-sort {
        min-width: 0;
        width: 100%;
    }
}

/* Table cells. */
.dl-road[b-swm6arjpji] {
    display: block;
    font-weight: 600;
    line-height: 1.35;
}

.dl-road--none[b-swm6arjpji] {
    font-weight: 500;
    color: var(--inf-text-2);
}

.dl-kind[b-swm6arjpji] {
    display: inline-flex;
    align-items: flex-start;
    gap: 4px;
    font-weight: 500;
}

.dl-ai[b-swm6arjpji] {
    display: inline-flex;
    flex: 0 0 auto;
    margin-top: 1px;
}

/* «dd.MM.yyyy» over «HH:mm» (mockup adm-05): three date columns fit beside six others at 1440 px. */
.dl-when[b-swm6arjpji] {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.3;
    white-space: nowrap;
}

.dl-when__time[b-swm6arjpji] {
    font-size: 0.8125rem;
    color: var(--inf-text-2);
}

.dl-when-wrap[b-swm6arjpji] {
    display: inline-flex;
    align-items: flex-start;
}

.dl-when-wrap .dl-when__time[b-swm6arjpji] {
    color: inherit;
    opacity: 0.85;
}

.dl-overdue[b-swm6arjpji] {
    gap: 3px;
    font-weight: 600;
}

.dl-overdue[b-swm6arjpji]  .dl-overdue-icon.mud-icon-root {
    font-size: 1rem;
}

.dl-page[b-swm6arjpji]  .dl-chip.mud-chip {
    margin: 2px 4px 2px 0;
}

/* The table scrolls inside its panel rather than widening the page. */
.dl-page[b-swm6arjpji]  .dl-table .mud-table-container {
    overflow-x: auto;
}

.dl-page[b-swm6arjpji]  .dl-table .mud-table-cell {
    padding-left: 8px;
    padding-right: 8px;
}

.dl-page[b-swm6arjpji]  .dl-table .mud-table-cell:first-child {
    padding-left: 16px;
}

@media (max-width: 599.98px) {
    /* MudTable's card mode (Breakpoint.Sm): one block per card, separated by a band of the canvas colour. */
    .dl-page[b-swm6arjpji]  .dl-table .mud-table-body .mud-table-row > .mud-table-cell {
        height: auto;
        padding: 5px 16px;
        border-bottom: 0;
    }

    .dl-page[b-swm6arjpji]  .dl-table .mud-table-body .mud-table-row > .mud-table-cell:first-child {
        padding-top: 14px;
        border-top: 8px solid var(--inf-bg);
    }

    .dl-page[b-swm6arjpji]  .dl-table .mud-table-body .mud-table-row:first-child > .mud-table-cell:first-child {
        border-top: 0;
    }

    .dl-page[b-swm6arjpji]  .dl-table .mud-table-body .mud-table-row > .mud-table-cell:last-child {
        padding-bottom: 14px;
    }

    .dl-when[b-swm6arjpji] {
        flex-direction: row;
        gap: 6px;
    }
}
/* /Components/Pages/Defects/DefectNeighboursPanel.razor.rz.scp.css */
/* DESIGN-review-and-verification.md §4.4 — «Карточки рядом». */
.nb-radii[b-hxhosb6b7z] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.nb-kind a:focus-visible[b-hxhosb6b7z],
.nb-thumb:focus-visible[b-hxhosb6b7z] {
    outline: 3px solid var(--inf-focus);
    outline-offset: 2px;
}

.nb-grid[b-hxhosb6b7z] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 12px;
}

.nb-card[b-hxhosb6b7z] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--inf-divider);
    border-radius: var(--inf-radius);
    overflow: hidden;
    background: var(--inf-surface);
}

/* Ticked as a duplicate: teal tint plus a teal frame (requirements §3.2 selection), the checkbox says it too. */
.nb-card.nb-selected[b-hxhosb6b7z] {
    border-color: var(--inf-primary);
    box-shadow: 0 0 0 1px var(--inf-primary);
    background: var(--inf-primary-tint);
}

.nb-thumb[b-hxhosb6b7z] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 112px;
    background: var(--inf-surface-muted);
    overflow: hidden;
    line-height: 0;
}

.nb-thumb[b-hxhosb6b7z]  img {
    max-height: 112px;
}

.nb-nophoto[b-hxhosb6b7z] {
    color: var(--inf-text-3);
}

.nb-body[b-hxhosb6b7z] {
    padding: 8px 10px 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.nb-kind[b-hxhosb6b7z] {
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.nb-kind a[b-hxhosb6b7z] {
    color: inherit;
    text-decoration: none;
}

.nb-kind a:hover[b-hxhosb6b7z] {
    text-decoration: underline;
}

.nb-same[b-hxhosb6b7z] {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0 6px;
    border-radius: 999px;
    color: var(--inf-info);
    background: var(--inf-info-bg);
    white-space: nowrap;
}

.nb-meta[b-hxhosb6b7z] {
    font-size: 0.8rem;
}

.nb-check[b-hxhosb6b7z] {
    margin-left: -6px;
}

.nb-check[b-hxhosb6b7z]  .mud-checkbox label,
.nb-check[b-hxhosb6b7z]  .mud-typography {
    font-size: 0.8rem;
}

@media (max-width: 600px) {
    .nb-grid[b-hxhosb6b7z] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .nb-thumb[b-hxhosb6b7z] {
        height: 96px;
    }

    .nb-thumb[b-hxhosb6b7z]  img {
        max-height: 96px;
    }
}
/* /Components/Pages/Defects/PhotoViewerDialog.razor.rz.scp.css */
/* DESIGN-review-and-verification.md §4.2 — full-screen viewer. A dark scrim on purpose (DESIGN-ui-theme.md: the
   light style everywhere else): a photo reads best on near-black, and the box colour of DetectionPicture (#ffcf33, a
   data colour) was chosen against dark surroundings. The scrim is the ИНФОДОР navy (--inf-text) darkened. */
.pv-root[b-tq35j5wrd2] {
    position: fixed;
    inset: 0;
    z-index: 1450; /* above the app bar / drawer (≤ 1300), below MudBlazor snackbars (1500) */
    display: flex;
    flex-direction: column;
    background: rgba(11, 21, 29, 0.96);
    color: #f4f8fb;
    outline: none;
    overscroll-behavior: contain;
}

.pv-bar[b-tq35j5wrd2] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 4px 8px 4px 16px;
    background: rgba(23, 43, 58, 0.72);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex: 0 0 auto;
}

.pv-counter[b-tq35j5wrd2] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pv-phase[b-tq35j5wrd2] {
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pv-hint[b-tq35j5wrd2] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 1px 10px;
    border-radius: 999px;
    border: 1px solid #ffcf33;
    color: #ffcf33;
    white-space: nowrap;
}

.pv-spacer[b-tq35j5wrd2] {
    flex: 1 1 auto;
}

.pv-action[b-tq35j5wrd2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border: 0;
    border-radius: 20px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.pv-action:hover[b-tq35j5wrd2],
.pv-action:focus-visible[b-tq35j5wrd2] {
    background: rgba(255, 255, 255, 0.14);
}

.pv-action:focus-visible[b-tq35j5wrd2],
.pv-nav:focus-visible[b-tq35j5wrd2] {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}

.pv-stage[b-tq35j5wrd2] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 56px;
}

.pv-frame[b-tq35j5wrd2] {
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.pv-nav[b-tq35j5wrd2] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 72px;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1;
}

.pv-nav:hover:not(:disabled)[b-tq35j5wrd2],
.pv-nav:focus-visible[b-tq35j5wrd2] {
    background: rgba(255, 255, 255, 0.24);
}

.pv-nav:disabled[b-tq35j5wrd2] {
    opacity: 0.25;
    cursor: default;
}

.pv-prev[b-tq35j5wrd2] {
    left: 4px;
}

.pv-next[b-tq35j5wrd2] {
    right: 4px;
}

/* Phone width: the photo takes the whole width, the arrows float over it. */
@media (max-width: 600px) {
    .pv-bar[b-tq35j5wrd2] {
        gap: 8px;
        padding-left: 12px;
    }

    .pv-action-label[b-tq35j5wrd2],
    .pv-hint[b-tq35j5wrd2] {
        display: none;
    }

    .pv-stage[b-tq35j5wrd2] {
        padding: 4px 0;
    }

    .pv-nav[b-tq35j5wrd2] {
        width: 40px;
        height: 56px;
        background: rgba(0, 0, 0, 0.45);
    }
}
/* /Components/Pages/Devices/CalibrationRunDetails.razor.rz.scp.css */
.crd-problems[b-wblp7oi6p4] {
    padding-left: 1.25rem;
    margin-top: 4px;
}

.crd-problems li[b-wblp7oi6p4] {
    margin-bottom: 4px;
}

.crd-figure[b-wblp7oi6p4] {
    margin: 0;
}

/* The solver draws the pictures 800 px wide on white; they scale down with the panel. */
.crd-figure img[b-wblp7oi6p4] {
    display: block;
    width: 100%;
    max-width: 800px;
    height: auto;
    background: var(--inf-surface);
    border-radius: var(--inf-radius);
    border: 1px solid var(--inf-divider);
}

.crd-figure figcaption[b-wblp7oi6p4] {
    font-size: 0.75rem;
    margin-top: 6px;
}

[b-wblp7oi6p4] .crd-metrics td {
    font-size: 0.8125rem;
}
/* /Components/Pages/Devices/CalibrationRunsTable.razor.rz.scp.css */
.crt-status[b-iqdg3rw2fx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.crt-root[b-iqdg3rw2fx]  .crt-bar {
    max-width: 180px;
}

.crt-root[b-iqdg3rw2fx]  .crt-message {
    display: block;
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crt-details > td[b-iqdg3rw2fx] {
    padding: 0 !important;
    background: var(--inf-surface-muted);
    border-bottom: 1px solid var(--inf-divider);
}
/* /Components/Pages/Devices/CalibrationTarget.razor.rz.scp.css */
.ct-page[b-xun7x89bwr]  .ct-intro {
    max-width: 960px;
    margin-bottom: 20px;
}

/* Three target cards side by side on a desktop, one per row on a phone. */
.ct-grid[b-xun7x89bwr] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--inf-gap);
    margin-bottom: var(--inf-gap);
}

.ct-card[b-xun7x89bwr] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 16px;
    background: var(--inf-surface);
    border: 1px solid var(--inf-divider);
    border-radius: var(--inf-radius);
    box-shadow: var(--inf-shadow-card);
}

/* The previews are black-on-white prints: a white ground and a fixed-height box so the three cards line up while
   the images load (the a3x2 preview is landscape, the other two portrait). */
.ct-preview[b-xun7x89bwr] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 260px;
    margin-bottom: 14px;
    padding: 8px;
    background: var(--inf-surface);
    border: 1px solid var(--inf-divider);
    border-radius: var(--inf-radius);
    text-align: center;
}

.ct-preview:hover[b-xun7x89bwr] {
    border-color: var(--inf-primary);
}

.ct-preview img[b-xun7x89bwr] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ct-page[b-xun7x89bwr]  .ct-card__title {
    margin: 0 0 8px;
}

.ct-specs[b-xun7x89bwr] {
    margin: 0 0 16px;
}

.ct-specs > div[b-xun7x89bwr] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--inf-divider-soft);
    font-size: 0.875rem;
}

.ct-specs dt[b-xun7x89bwr] {
    color: var(--inf-text-2);
}

.ct-specs dd[b-xun7x89bwr] {
    margin: 0;
    text-align: right;
    font-weight: 500;
}

/* The procedure as numbered steps with tinted counters. */
.ct-steps[b-xun7x89bwr] {
    counter-reset: ct-step;
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 960px;
}

.ct-steps li[b-xun7x89bwr] {
    counter-increment: ct-step;
    position: relative;
    margin-bottom: 14px;
    padding-left: 40px;
    line-height: 1.5;
}

.ct-steps li[b-xun7x89bwr]::before {
    content: counter(ct-step);
    position: absolute;
    left: 0;
    top: -1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--inf-primary-tint);
    color: var(--inf-primary-emphasis);
    font-size: 0.8125rem;
    font-weight: 700;
}
/* /Components/Pages/Devices/DeviceCalibrationSection.razor.rz.scp.css */
/* «Активная калибровка» as a quiet strip above the two tables. */
.dcs-active[b-vhugdt3c6p] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid var(--inf-divider);
    border-radius: var(--inf-radius);
    background: var(--inf-surface-muted);
}

[b-vhugdt3c6p] .dcs-heading {
    margin: 24px 0 8px;
    font-size: 0.9375rem;
    font-weight: 600;
}

/* Each table in its own bordered box; wide ones scroll inside it on a phone. */
.dcs-table[b-vhugdt3c6p] {
    border: 1px solid var(--inf-divider);
    border-radius: var(--inf-radius);
    overflow-x: auto;
}
/* /Components/Pages/Devices/DeviceDetail.razor.rz.scp.css */
/* The device ID under the name: monospace, kept on one line. */
.dd-key[b-ns19ztnkz3] {
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--inf-neutral-bg);
    color: var(--inf-text);
    font-size: 0.8125rem;
    white-space: nowrap;
}

.dd-facts dd[b-ns19ztnkz3] {
    margin: 0;
}
/* /Components/Pages/Devices/DeviceList.razor.rz.scp.css */
.dl-page[b-tpl4g6daz6]  .dl-name {
    font-weight: 600;
}

.dl-key[b-tpl4g6daz6] {
    font-size: 0.8125rem;
    white-space: nowrap;
}

.dl-page[b-tpl4g6daz6]  .dl-all-switch {
    margin-right: 4px;
}
/* /Components/Pages/Dispatches/DispatchDetail.razor.rz.scp.css */
/* Dispatch detail (DESIGN-ui-theme.md §5, mockups cus-09 / mgr-05 / dsp-04 detail panel). */

.dispatch-facts[b-c3k3n21mk0] {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.dispatch-facts__wide[b-c3k3n21mk0] {
    grid-column: 1 / -1;
}

.dispatch-fact__text[b-c3k3n21mk0] {
    min-width: 0;
}

.dispatch-assign[b-c3k3n21mk0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--inf-divider-soft);
}

.dispatch-assign__select[b-c3k3n21mk0] {
    flex: 1 1 220px;
    min-width: 0;
}

.dispatch-walk[b-c3k3n21mk0] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dispatch-page[b-c3k3n21mk0]  .dispatch-defects {
    overflow-x: auto;
    border-radius: 0 0 var(--inf-radius) var(--inf-radius);
}

.dispatch-page[b-c3k3n21mk0]  .dispatch-defects table {
    min-width: 520px;
}
/* /Components/Pages/Dispatches/DispatchEditDialog.razor.rz.scp.css */
/* «Plan a dispatch» dialog (DESIGN-ui-theme.md §5): outlined fields in a grid, defects in a bordered list. */

.dispatch-dialog__title[b-iuaftler17] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dispatch-dialog__title[b-iuaftler17]  .dispatch-dialog__title-icon {
    color: var(--inf-primary);
}

.dispatch-dialog__defects[b-iuaftler17] {
    margin-top: 16px;
    border: 1px solid var(--inf-divider);
    border-radius: var(--inf-radius);
    overflow: hidden;
}

[b-iuaftler17] .dispatch-dialog__defects-head {
    padding: 8px 12px;
    background: var(--inf-surface-muted);
    border-bottom: 1px solid var(--inf-divider);
}

.dispatch-dialog__defects-list[b-iuaftler17] {
    max-height: 220px;
    overflow-y: auto;
    padding: 4px 4px;
}
/* /Components/Pages/Dispatches/DispatchList.razor.rz.scp.css */
/* Dispatches list (DESIGN-ui-theme.md §5, mockups cus-09 / mgr-05 / dsp-04). */

.dispatch-filter[b-gh6319t2a8] {
    flex: 0 1 260px;
    min-width: 200px;
}

.inf-filter-bar[b-gh6319t2a8]  .dispatch-mine {
    margin-left: 4px;
}

.dispatch-kind[b-gh6319t2a8] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.dispatch-kind__icon[b-gh6319t2a8] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--inf-primary-tint);
    color: var(--inf-primary);
}

@media (max-width: 599.98px) {
    .dispatch-filter[b-gh6319t2a8] {
        flex: 1 1 100%;
    }
}

/* Five tiles on a phone: the total spans the row, the four status tiles sit 2 × 2; long labels wrap. */

@media (max-width: 599.98px) {
    .inf-kpi-row[b-gh6319t2a8]  .inf-kpi:first-child { grid-column: 1 / -1; }
    .inf-kpi-row[b-gh6319t2a8]  .inf-kpi__label { hyphens: auto; overflow-wrap: anywhere; }
}
/* /Components/Pages/Error.razor.rz.scp.css */
/* A centred state on a white panel: tinted icon, the page's h1, one sentence, the way back. */
.err-state[b-p19w59zwfa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 640px;
    margin: 48px auto;
    padding: 40px 24px;
    text-align: center;
    background: var(--inf-surface);
    border: 1px solid var(--inf-divider);
    border-radius: var(--inf-radius);
}

.err-state__icon[b-p19w59zwfa] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    border-radius: 16px;
    background: var(--inf-error-bg);
    color: var(--inf-error);
}

.err-state[b-p19w59zwfa]  .err-state__title {
    margin-bottom: 8px;
}

@media (max-width: 599.98px) {
    .err-state[b-p19w59zwfa] {
        margin: 16px auto;
        padding: 28px 16px;
    }
}

.err-state__id[b-p19w59zwfa] {
    overflow-wrap: anywhere;
}
/* /Components/Pages/Home/Home.razor.rz.scp.css */
/* The overview (DESIGN-ui-theme.md, mockup adm-01): KPI grid, the map panel with its legend, and the side column
   («Требуют внимания», open defects by status). Colours are theme tokens (infodor.css); the map swatches mirror the
   paints in wwwroot/js/dashboard/dashboard-map.js (roads --inf-primary, twin lime on --inf-text, tracks violet,
   defect status colours) — change both together. */

/* ---------- KPI grid ---------- */

/* Home.razor sets --ivi-kpi-cols and the last tile's span (--ivi-last-span, --ivi-last-span-md) from the number of
   tiles the viewer gets (6–8, plus the mobile-app tile for the roles that carry the app), so every band ends its
   last row full: wide ≥ 1440 px (4–5 columns), medium 700–1439 px (three columns), small < 700 px (two columns). */
@media (min-width: 1440px) {
    .ivi-kpi-grid[b-ufwdlgf39b] {
        grid-template-columns: repeat(var(--ivi-kpi-cols, 4), minmax(0, 1fr));
    }

    .ivi-kpi-grid[b-ufwdlgf39b]  .inf-kpi:last-child {
        grid-column: span var(--ivi-last-span, 1);
    }
}

@media (min-width: 700px) and (max-width: 1439.98px) {
    .ivi-kpi-grid[b-ufwdlgf39b] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ivi-kpi-grid[b-ufwdlgf39b]  .inf-kpi:last-child {
        grid-column: span var(--ivi-last-span-md, 1);
    }
}

/* Small: the mobile-app tile (a button and a link) always takes a whole row, and an odd last figure tile takes the
   whole row instead of leaving a hole beside it. */
@media (max-width: 699.98px) {
    .ivi-kpi-grid[b-ufwdlgf39b] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ivi-kpi-grid[b-ufwdlgf39b]  #mobile-app-card,
    .ivi-kpi-grid[b-ufwdlgf39b]  .inf-kpi:last-child:nth-child(odd),
    .ivi-kpi-grid[b-ufwdlgf39b]  .inf-kpi:nth-last-child(2):nth-child(odd):has(+ #mobile-app-card) {
        grid-column: 1 / -1;
    }
}

/* ---------- Map + side column ---------- */

.ivi-overview[b-ufwdlgf39b] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--inf-gap);
    align-items: start;
}

@media (min-width: 1280px) {
    .ivi-overview[b-ufwdlgf39b] {
        grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
    }
}

.ivi-overview__side[b-ufwdlgf39b] {
    display: flex;
    flex-direction: column;
    gap: var(--inf-gap);
    min-width: 0;
}

/* The map panel clips the map to its rounded corners. */
.ivi-home[b-ufwdlgf39b]  .ivi-map-panel {
    overflow: hidden;
}

/* The positioning box of the map: RoadSummaryCard is absolute inside it. */
.ivi-map-box[b-ufwdlgf39b] {
    position: relative;
    border-top: 1px solid var(--inf-divider);
}

.ivi-map[b-ufwdlgf39b] {
    width: 100%;
    height: 62vh;
    min-height: 420px;
    background: var(--inf-surface-muted);
}

.ivi-home[b-ufwdlgf39b]  .ivi-map-refresh.mud-icon-button {
    border-color: var(--inf-border-control);
    color: var(--inf-text-2);
}

.ivi-home[b-ufwdlgf39b]  .ivi-map-alert {
    margin: 12px 16px 16px;
}

/* ---------- Legend under the map ---------- */

.ivi-map-legend[b-ufwdlgf39b] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 20px;
    padding: 12px 16px 14px;
    border-top: 1px solid var(--inf-divider);
    font-size: 0.8125rem;
    color: var(--inf-text);
}

.ivi-map-legend__item[b-ufwdlgf39b] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.ivi-map-legend__hint[b-ufwdlgf39b] {
    margin-left: auto;
    color: var(--inf-text-2);
}

.ivi-map-legend__line[b-ufwdlgf39b] {
    display: inline-block;
    width: 22px;
    height: 3px;
    border-radius: 2px;
}

.ivi-map-legend__line--road[b-ufwdlgf39b] {
    background: var(--inf-primary);
}

.ivi-map-legend__line--twin[b-ufwdlgf39b] {
    height: 5px;
    background: #c6ff00;
    box-shadow: 0 0 0 2px var(--inf-text);
}

.ivi-map-legend__line--track[b-ufwdlgf39b] {
    height: 0;
    border-top: 2px dashed #7e57c2;
    border-radius: 0;
}

.ivi-map-legend__dot[b-ufwdlgf39b] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #42a5f5;
    box-shadow: 0 0 0 1.5px #ffffff, 0 0 0 2.5px rgba(23, 43, 58, 0.25);
}

.ivi-map-legend__dot--overdue[b-ufwdlgf39b] {
    background: #e53935;
}

/* ---------- «Требуют внимания» ---------- */

.ivi-home[b-ufwdlgf39b]  .ivi-panel-link {
    white-space: nowrap;
    font-weight: 600;
}

/* Keep «Все дефекты →» on the title's line on a phone: the title may wrap, the link does not move under it. */
.ivi-home[b-ufwdlgf39b]  .ivi-attention-panel .inf-panel__header {
    flex-wrap: nowrap;
}

.ivi-home[b-ufwdlgf39b]  .ivi-attention-panel .inf-panel__heading {
    flex: 1 1 0;
}

.ivi-attention[b-ufwdlgf39b] {
    list-style: none;
    margin: -4px -8px -8px;
    padding: 0;
    max-height: 62vh;
    overflow-y: auto;
}

.ivi-attention > li + li[b-ufwdlgf39b] {
    border-top: 1px solid var(--inf-divider-soft);
}

.ivi-attention__row[b-ufwdlgf39b] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 8px;
    border-radius: var(--inf-radius);
    color: var(--inf-text);
    text-decoration: none;
}

.ivi-attention__row:hover[b-ufwdlgf39b] {
    background: var(--inf-hover);
    color: var(--inf-text);
}

.ivi-attention__icon[b-ufwdlgf39b] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
}

.ivi-attention__row--error .ivi-attention__icon[b-ufwdlgf39b] { background: var(--inf-error-bg); color: var(--inf-error); }
.ivi-attention__row--warning .ivi-attention__icon[b-ufwdlgf39b] { background: var(--inf-warning-bg); color: var(--inf-warning); }

.ivi-attention__text[b-ufwdlgf39b] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.ivi-attention__title[b-ufwdlgf39b] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    font-size: 0.875rem;
}

.ivi-attention__title b[b-ufwdlgf39b] {
    font-weight: 600;
}

.ivi-attention__meta[b-ufwdlgf39b] {
    font-size: 0.8125rem;
    color: var(--inf-text-2);
    overflow-wrap: anywhere;
}

.ivi-attention__meta:empty[b-ufwdlgf39b] {
    display: none;
}

.ivi-home[b-ufwdlgf39b]  .ivi-attention__chevron.mud-icon-root {
    flex: 0 0 auto;
    align-self: center;
    color: var(--inf-text-3);
}

.ivi-attention-empty[b-ufwdlgf39b] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ivi-attention-empty__icon[b-ufwdlgf39b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--inf-success-bg);
    color: var(--inf-success);
}

/* ---------- Open defects by status ---------- */

.ivi-status-chips[b-ufwdlgf39b] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* The map's defect colours (dashboard-map.js STATUS_COLORS): the chips double as the key to them. */
.ivi-status-dot[b-ufwdlgf39b] {
    display: inline-block;
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-right: 6px;
    border-radius: 50%;
    background: #9e9e9e;
}

.ivi-status-dot--Verified[b-ufwdlgf39b] { background: #42a5f5; }
.ivi-status-dot--Assigned[b-ufwdlgf39b] { background: #ffa726; }
.ivi-status-dot--InProgress[b-ufwdlgf39b] { background: #ab47bc; }
.ivi-status-dot--Disputed[b-ufwdlgf39b] { background: #8d6e63; }
.ivi-status-dot--FixReported[b-ufwdlgf39b] { background: #26a69a; }
.ivi-status-dot--VerificationPlanned[b-ufwdlgf39b] { background: #5c6bc0; }
.ivi-status-dot--Reopened[b-ufwdlgf39b] { background: #ec407a; }
.ivi-status-dot--Closed[b-ufwdlgf39b] { background: #4caf50; }
.ivi-status-dot--Rejected[b-ufwdlgf39b] { background: #607d8b; }

/* ---------- Phone ---------- */

@media (max-width: 599.98px) {
    .ivi-map-legend[b-ufwdlgf39b] {
        gap: 6px 14px;
        padding: 10px 12px 12px;
    }

    .ivi-map-legend__hint[b-ufwdlgf39b] {
        margin-left: 0;
        flex-basis: 100%;
    }
}
/* /Components/Pages/Home/RoadSummaryCard.razor.rz.scp.css */
/* The overview's road card (DESIGN-overview-volume-twins.md §1, restyled for DESIGN-ui-theme.md). It floats over
   the map (Home.razor's .ivi-map-box, the map only — not the legend under it): a 340 px overlay card at the map's
   top-left on a wide screen, a bottom sheet across the map on a phone. Colours are theme tokens (infodor.css),
   except the twin swatch, which mirrors the lime of wwwroot/js/dashboard/dashboard-map.js. */

.ivi-road-card[b-upuf7lyx8d] {
    position: absolute;
    z-index: 3;
    top: 12px;
    left: 12px;
    width: 340px;
    max-width: calc(100% - 24px);
    max-height: calc(100% - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 14px 16px 16px;
    border: 1px solid var(--inf-divider);
    border-radius: var(--inf-radius-lg);
    background: var(--inf-surface);
    box-shadow: var(--inf-shadow-overlay);
    color: var(--inf-text);
    font-size: 0.875rem;
    line-height: 1.45;
}

.ivi-road-card__head[b-upuf7lyx8d] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.ivi-road-card__icon[b-upuf7lyx8d] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--inf-primary-tint);
    color: var(--inf-primary);
}

.ivi-road-card__title[b-upuf7lyx8d] {
    flex: 1 1 auto;
    min-width: 0;
}

.ivi-road-card__name[b-upuf7lyx8d] {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.ivi-road-card__sub[b-upuf7lyx8d] {
    display: flex;
    flex-wrap: wrap;
    gap: 0 10px;
    margin-top: 2px;
    font-size: 0.75rem;
    color: var(--inf-text-2);
}

.ivi-road-card[b-upuf7lyx8d]  .ivi-road-card__close.mud-icon-button {
    margin: -4px -6px 0 0;
    color: var(--inf-text-2);
}

.ivi-road-card__chips[b-upuf7lyx8d] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 4px;
}

.ivi-road-card__chips[b-upuf7lyx8d]  .mud-chip {
    margin: 0;
}

.ivi-road-card__facts[b-upuf7lyx8d] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 14px;
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: var(--inf-radius);
    background: var(--inf-surface-muted);
    border: 1px solid var(--inf-divider-soft);
}

.ivi-road-card__facts dt[b-upuf7lyx8d] {
    color: var(--inf-text-2);
}

.ivi-road-card__facts dd[b-upuf7lyx8d] {
    margin: 0;
    min-width: 0;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.ivi-road-card__facts dd b[b-upuf7lyx8d] {
    font-variant-numeric: tabular-nums;
}

.ivi-road-card__overdue[b-upuf7lyx8d] {
    color: var(--inf-error);
    font-weight: 600;
}

.ivi-road-card__section[b-upuf7lyx8d] {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--inf-divider);
}

.ivi-road-card__section-title[b-upuf7lyx8d] {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--inf-text);
    margin-bottom: 6px;
}

.ivi-road-card__twin-title[b-upuf7lyx8d] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ivi-road-card__list[b-upuf7lyx8d] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ivi-road-card__list > li[b-upuf7lyx8d] {
    padding: 6px 0;
}

.ivi-road-card__list > li + li[b-upuf7lyx8d] {
    border-top: 1px solid var(--inf-divider-soft);
}

.ivi-road-card__row[b-upuf7lyx8d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ivi-road-card__strong[b-upuf7lyx8d],
.ivi-road-card[b-upuf7lyx8d]  .ivi-road-card__strong {
    font-weight: 600;
}

.ivi-road-card__line[b-upuf7lyx8d] {
    overflow-wrap: anywhere;
}

.ivi-road-card__muted[b-upuf7lyx8d] {
    color: var(--inf-text-2);
    font-size: 0.8125rem;
}

.ivi-road-card__inactive[b-upuf7lyx8d] {
    opacity: 0.72;
}

.ivi-road-card__actions[b-upuf7lyx8d] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

/* Twin swatch: the same lime-on-navy-casing line the map draws (dashboard-map.js TWIN_COLOR / --inf-text). */
.ivi-road-card__twin-swatch[b-upuf7lyx8d] {
    display: inline-block;
    width: 22px;
    height: 5px;
    border-radius: 3px;
    background: #c6ff00;
    box-shadow: 0 0 0 2px var(--inf-text);
}

/* Phone: a bottom sheet across the map, so the road stays visible above it. */
@media (max-width: 599.98px) {
    .ivi-road-card[b-upuf7lyx8d] {
        top: auto;
        left: 8px;
        right: 8px;
        bottom: 8px;
        width: auto;
        max-width: none;
        max-height: 70%;
        border-radius: var(--inf-radius-lg) var(--inf-radius-lg) var(--inf-radius) var(--inf-radius);
    }
}
/* /Components/Pages/Inspections/Inspections.razor.rz.scp.css */
/* DESIGN-ui-theme.md §5 — «Обследования» (mockup adm-06): page tabs on the canvas, each tab a flush panel with the
   table edge to edge; the analysis column's bar carries its percentage. */

/* Page-level tabs sit on the canvas (no card around the tab bar); the panels below are the cards. */
.insp-tabs[b-59864sfxya]  .mud-tabs-tabbar {
    background: transparent;
    border-radius: 0;
}

.insp-tabs[b-59864sfxya]  .mud-tab {
    min-height: 48px;
    color: var(--inf-text-2);
}

.insp-tabs[b-59864sfxya]  .mud-tab.mud-tab-active {
    color: var(--inf-primary);
}

.insp-tabs[b-59864sfxya]  .insp-tab-panels {
    padding-top: 16px;
}

.insp-total[b-59864sfxya] {
    font-size: 0.875rem;
    white-space: nowrap;
}

.insp-empty[b-59864sfxya] {
    padding: 0 16px 16px;
}

.insp-tabs[b-59864sfxya]  .insp-nowrap {
    white-space: nowrap;
}

.insp-chips[b-59864sfxya] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
}

.insp-part[b-59864sfxya] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.insp-tabs[b-59864sfxya]  .insp-file {
    white-space: nowrap;
}

@media (max-width: 959.98px) {
    .insp-tabs[b-59864sfxya]  .insp-file {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

.insp-analysis[b-59864sfxya] {
    min-width: 130px;
}

/* The recordings table is wider than the panel at laptop widths: tighter cells, and the actions column stays in
   view on the right while the rest scrolls inside the panel (DESIGN-ui-theme.md §5.8). Cards below 960 px. */
@media (min-width: 960px) {
    .insp-tabs[b-59864sfxya]  .insp-recordings .mud-table-cell {
        padding-left: 8px;
        padding-right: 8px;
    }

    .insp-tabs[b-59864sfxya]  .insp-recordings .mud-table-cell:first-child {
        padding-left: 16px;
    }

    .insp-tabs[b-59864sfxya]  .insp-recordings .insp-sticky {
        position: sticky;
        right: 0;
        z-index: 1;
        padding-right: 12px;
        background: var(--inf-surface);
        box-shadow: inset 1px 0 0 var(--inf-divider-soft);
    }

    .insp-tabs[b-59864sfxya]  .insp-recordings thead .insp-sticky {
        z-index: 3;
        background: var(--inf-surface-muted);
    }

    .insp-tabs[b-59864sfxya]  .insp-recordings .mud-table-row:hover > .insp-sticky {
        background: linear-gradient(var(--mud-palette-table-hover), var(--mud-palette-table-hover)), var(--inf-surface);
    }
}

.insp-bar[b-59864sfxya] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.insp-bar[b-59864sfxya]  .mud-progress-linear {
    flex: 1 1 auto;
}

.insp-bar-value[b-59864sfxya] {
    flex: none;
    min-width: 36px;
    text-align: right;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--inf-text-2);
}

@media (max-width: 599.98px) {
    .insp-analysis[b-59864sfxya] {
        min-width: 0;
        width: 100%;
    }
}
/* /Components/Pages/Inspections/PromoteDetectionDialog.razor.rz.scp.css */
/* DESIGN-ui-theme.md §5 — «Зарегистрировать дефект»: what the AI saw in a tinted strip above the form. */

.pdd-title[b-b7y524kdqm] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pdd-title[b-b7y524kdqm]  .pdd-title-icon {
    color: var(--inf-primary);
}

.pdd-source[b-b7y524kdqm] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 16px;
    border-radius: var(--inf-radius);
    background: var(--inf-info-bg);
    color: var(--inf-text);
    font-size: 0.875rem;
}

.pdd-source[b-b7y524kdqm]  .pdd-source-icon {
    color: var(--inf-info);
    margin-top: 1px;
}
/* /Components/Pages/Inspections/RecordingReview.razor.rz.scp.css */
/* DESIGN-ui-theme.md §5 — «/recordings/{id}»: header with the status chip, the recording's totals as KPI tiles, page
   tabs on the canvas, the detections grouped by frame in panels, the located-detections map beside them. */

.rr-part[b-iw1v60ku5d] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: 0.875rem;
}

.rr-tabs[b-iw1v60ku5d]  .mud-tabs-tabbar {
    background: transparent;
    border-radius: 0;
}

.rr-tabs[b-iw1v60ku5d]  .mud-tab {
    min-height: 48px;
    color: var(--inf-text-2);
}

.rr-tabs[b-iw1v60ku5d]  .mud-tab.mud-tab-active {
    color: var(--inf-primary);
}

.rr-tabs[b-iw1v60ku5d]  .rr-tab-panels {
    padding-top: 16px;
}

.rr-filters[b-iw1v60ku5d] {
    padding: 12px 16px;
    margin-bottom: 16px;
}

/* MudSelect's own wrapper (div.mud-select) is the flex item; its Class lands on the inner input control. */
.rr-filters[b-iw1v60ku5d]  .inf-filter-bar > .mud-select {
    flex: 0 1 260px;
    min-width: 200px;
}

.rr-confidence[b-iw1v60ku5d] {
    flex: 0 1 240px;
    min-width: 180px;
}

.rr-frame[b-iw1v60ku5d] {
    padding: 12px 16px 16px;
    margin-bottom: 16px;
}

.rr-frame-head[b-iw1v60ku5d] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin-bottom: 12px;
}

.rr-frame-head[b-iw1v60ku5d]  .rr-frame-icon {
    color: var(--inf-text-2);
}

.rr-frame-head[b-iw1v60ku5d]  .rr-frame-title {
    margin: 0;
}

.rr-frame-meta[b-iw1v60ku5d] {
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.rr-cards[b-iw1v60ku5d] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.rr-cards[b-iw1v60ku5d]  .rr-card {
    width: 260px;
    max-width: 100%;
    cursor: zoom-in;
    border-color: var(--inf-divider);
    border-radius: var(--inf-radius);
    overflow: hidden;
}

.rr-cards[b-iw1v60ku5d]  .rr-card:hover {
    border-color: var(--inf-primary);
}

.rr-cards[b-iw1v60ku5d]  .rr-card-content {
    padding: 10px 12px 6px;
}

.rr-cards[b-iw1v60ku5d]  .rr-card-actions {
    gap: 6px;
    padding: 6px 12px 12px;
}

.rr-map[b-iw1v60ku5d] {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--inf-radius);
    border: 1px solid var(--inf-divider);
}

@media (max-width: 599.98px) {
    .rr-filters[b-iw1v60ku5d]  .inf-filter-bar > .mud-select,
    .rr-confidence[b-iw1v60ku5d] {
        flex: 1 1 100%;
    }

    .rr-cards[b-iw1v60ku5d]  .rr-card {
        width: 100%;
    }
}
/* /Components/Pages/Inspections/RigImportDialog.razor.rz.scp.css */
/* DESIGN-ui-theme.md §5 — «Импорт результата обследования»: the three sources as choice pills (the chosen one
   teal-tinted), the archive picker as a dashed drop area, the shared road/dispatch pickers below. */

.rid-title[b-xfblyybnxv] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.rid-title[b-xfblyybnxv]  .rid-title-icon {
    color: var(--inf-primary);
}

.rid-sources[b-xfblyybnxv] {
    margin-bottom: 16px;
}

.rid-sources[b-xfblyybnxv]  .mud-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rid-sources[b-xfblyybnxv]  .mud-radio {
    margin: 0;
    padding-right: 12px;
    border: 1px solid var(--inf-border-control);
    border-radius: var(--inf-radius);
    background: var(--inf-surface);
}

.rid-sources[b-xfblyybnxv]  .mud-radio:has(input:checked) {
    border-color: var(--inf-primary);
    background: var(--inf-primary-tint);
    color: var(--inf-primary-emphasis);
    font-weight: 600;
}

.rid-archive[b-xfblyybnxv] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    margin-bottom: 16px;
    border: 1px dashed var(--inf-input-border);
    border-radius: var(--inf-radius);
    background: var(--inf-surface-muted);
}

.rid-archive[b-xfblyybnxv]  .rid-archive-icon {
    color: var(--inf-primary);
    margin-top: 2px;
}

.rid-archive-body[b-xfblyybnxv] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.rid-archive-label[b-xfblyybnxv] {
    font-weight: 600;
    font-size: 0.875rem;
}

.rid-archive[b-xfblyybnxv]  .rid-archive-input {
    max-width: 100%;
    font: inherit;
    font-size: 0.875rem;
}

.rid-archive[b-xfblyybnxv]  .rid-archive-input::file-selector-button {
    margin-right: 10px;
    padding: 6px 14px;
    border: 1px solid var(--inf-primary);
    border-radius: var(--inf-radius);
    background: var(--inf-surface);
    color: var(--inf-primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

/* «Папка с набором данных» (DatasetFolderUpload has no scoped stylesheet of its own: its tests pin bare table cells). */
.rid-folder[b-xfblyybnxv]  .dsu-card {
    border-color: var(--inf-divider);
    border-radius: var(--inf-radius);
}

.rid-folder[b-xfblyybnxv]  .dsu-name {
    overflow-wrap: anywhere;
    margin: 0;
}

.rid-folder[b-xfblyybnxv]  .dsu-session {
    border-top: 1px solid var(--inf-divider-soft);
}
/* /Components/Pages/Inspections/RoadSplitDialog.razor.rz.scp.css */
/* DESIGN-review-and-verification.md §3.4: the track sketch and the segment swatches of RoadSplitDialog, in the
   DESIGN-ui-theme.md tokens. The road colours themselves are data colours (one per matched road). */

.road-split-title[b-ga7tawzsdb] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.road-split-title[b-ga7tawzsdb]  .road-split-title-icon {
    color: var(--inf-primary);
}

.road-split-file[b-ga7tawzsdb] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.road-split-file[b-ga7tawzsdb]  .road-split-file-icon {
    color: var(--inf-text-2);
}

.road-split-sketch svg[b-ga7tawzsdb] {
    display: block;
    width: 100%;
    height: auto;
    max-height: 220px;
}

.road-split-sketch-bg[b-ga7tawzsdb] {
    fill: var(--inf-surface-muted);
    stroke: var(--inf-divider);
}

.road-split-legend[b-ga7tawzsdb] {
    display: inline-flex;
    align-items: center;
    font-size: 0.8125rem;
    color: var(--inf-text-2);
    max-width: 100%;
    overflow-wrap: anywhere;
}

.road-split-swatch[b-ga7tawzsdb] {
    display: inline-block;
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    margin-right: 6px;
    vertical-align: middle;
}

.road-split-table[b-ga7tawzsdb] {
    margin-bottom: 16px;
    border: 1px solid var(--inf-divider);
    border-radius: var(--inf-radius);
    overflow: hidden;
}

.road-split-attach[b-ga7tawzsdb] {
    padding: 12px 16px 16px;
    border: 1px solid var(--inf-divider);
    border-radius: var(--inf-radius);
    background: var(--inf-surface-muted);
}
/* /Components/Pages/Inspections/SessionDetailDialog.razor.rz.scp.css */
/* DESIGN-ui-theme.md §5.4 — the session drawer: key facts as inf-facts, then one titled section per block (upload,
   vision, cards, detections, track, stored frames) separated by dividers. Wide tables scroll inside the dialog. */

.sdd-title[b-oxev74jylc] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sdd-title[b-oxev74jylc]  .sdd-title-icon {
    color: var(--inf-primary);
}

.sdd-facts[b-oxev74jylc] {
    margin-bottom: 4px;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.sdd-facts dt[b-oxev74jylc],
.sdd-facts dd[b-oxev74jylc] {
    margin: 0;
}

.sdd-fact-wide[b-oxev74jylc] {
    grid-column: span 2;
}

.sdd-section[b-oxev74jylc] {
    padding: 14px 0 4px;
    margin-top: 12px;
    border-top: 1px solid var(--inf-divider);
}

.sdd-section[b-oxev74jylc]  .sdd-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    font-size: 0.9375rem;
}

.sdd-section[b-oxev74jylc]  .sdd-section-title .mud-icon-root {
    color: var(--inf-text-2);
}

.sdd-scroll[b-oxev74jylc] {
    overflow-x: auto;
    border: 1px solid var(--inf-divider);
    border-radius: var(--inf-radius);
}

.sdd-scroll td.inf-num[b-oxev74jylc] {
    white-space: nowrap;
}

.sdd-thumb[b-oxev74jylc] {
    width: 160px;
    min-width: 120px;
}

.sdd-map[b-oxev74jylc] {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--inf-radius);
    border: 1px solid var(--inf-divider);
}

.sdd-frames[b-oxev74jylc] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sdd-frame[b-oxev74jylc] {
    width: 120px;
    border-radius: 6px;
    overflow: hidden;
}

@media (max-width: 599.98px) {
    .sdd-fact-wide[b-oxev74jylc] {
        grid-column: auto;
    }

    .sdd-frame[b-oxev74jylc] {
        width: calc(50% - 4px);
    }
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
/* A centred state on a white panel: tinted icon, the page's h1, one sentence, the way back. */
.nf-state[b-oki19tsnce] {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 640px;
    margin: 48px auto;
    padding: 40px 24px;
    text-align: center;
    background: var(--inf-surface);
    border: 1px solid var(--inf-divider);
    border-radius: var(--inf-radius);
}

.nf-state__icon[b-oki19tsnce] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    border-radius: 16px;
    background: var(--inf-neutral-bg);
    color: var(--inf-neutral);
}

.nf-state[b-oki19tsnce]  .nf-state__title {
    margin-bottom: 8px;
}

@media (max-width: 599.98px) {
    .nf-state[b-oki19tsnce] {
        margin: 16px auto;
        padding: 28px 16px;
    }
}
/* /Components/Pages/Notifications/NotificationList.razor.rz.scp.css */
/* /notifications in the ИНФОДОР style (DESIGN-ui-theme.md, mockup cus-08). Colours are theme tokens (infodor.css). */

/* «Отметить все как прочитанные» is disabled when nothing is unread: infodor.css keeps the teal border of an
   outlined primary button even then (proposed shared fix in reports/T1.md), so the disabled state is restored here. */
.ivi-notes-page[b-h62mue8mbb]  .inf-page-header__actions .mud-button-outlined:disabled {
    border-color: var(--inf-divider);
}

/* Filter panel: the switch on the left, the unread counter on the right. */
[b-h62mue8mbb] .ivi-notes-filter {
    margin-bottom: var(--inf-gap);
}

[b-h62mue8mbb] .ivi-notes-filter .inf-panel__body {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* The counters box (mockup cus-08 «Непрочитанные | Всего»): unread, and how many rows the list shows. */
.ivi-notes-counter[b-h62mue8mbb] {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 6px 16px;
    border-radius: var(--inf-radius);
    background: var(--inf-primary-tint);
    color: var(--inf-primary-emphasis);
}

[b-h62mue8mbb] .ivi-notes-counter__icon.mud-icon-root {
    font-size: 1.375rem;
}

.ivi-notes-counter__item[b-h62mue8mbb] {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.2;
}

.ivi-notes-counter__label[b-h62mue8mbb] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--inf-text-2);
}

.ivi-notes-counter__value[b-h62mue8mbb] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--inf-text);
}

.ivi-notes-counter__sep[b-h62mue8mbb] {
    align-self: stretch;
    width: 1px;
    background: var(--inf-primary-tint-strong);
}

.ivi-notes-empty[b-h62mue8mbb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

[b-h62mue8mbb] .ivi-notes-empty .mud-icon-root {
    color: var(--inf-text-3);
}

/* The list: one row per notification, dividers between rows, unread rows marked by a teal edge, the bold
   title and a dot. */
[b-h62mue8mbb] .ivi-notes {
    overflow: hidden;
}

[b-h62mue8mbb] .ivi-notes__list.mud-list {
    padding: 0;
}

[b-h62mue8mbb] .ivi-note.mud-list-item {
    padding: 14px 16px;
    border-top: 1px solid var(--inf-divider-soft);
    align-items: flex-start;
}

[b-h62mue8mbb] .ivi-note.mud-list-item:first-child {
    border-top: 0;
}

[b-h62mue8mbb] .ivi-note--unread.mud-list-item {
    box-shadow: inset 3px 0 0 var(--inf-primary);
}

[b-h62mue8mbb] .ivi-note .mud-list-item-text {
    margin: 0;
}

.ivi-note__row[b-h62mue8mbb] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}

.ivi-note__icon[b-h62mue8mbb] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
}

.ivi-note__icon--primary[b-h62mue8mbb] { background: var(--inf-primary-tint); color: var(--inf-primary); }
.ivi-note__icon--info[b-h62mue8mbb] { background: var(--inf-info-bg); color: var(--inf-info); }
.ivi-note__icon--success[b-h62mue8mbb] { background: var(--inf-success-bg); color: var(--inf-success); }
.ivi-note__icon--warning[b-h62mue8mbb] { background: var(--inf-warning-bg); color: var(--inf-warning); }
.ivi-note__icon--error[b-h62mue8mbb] { background: var(--inf-error-bg); color: var(--inf-error); }
.ivi-note__icon--neutral[b-h62mue8mbb] { background: var(--inf-neutral-bg); color: var(--inf-neutral); }
.ivi-note__icon--accent[b-h62mue8mbb] { background: var(--inf-accent-bg); color: var(--inf-accent); }

.ivi-note__text[b-h62mue8mbb] {
    flex: 1 1 auto;
    min-width: 0;
}

.ivi-note__title[b-h62mue8mbb] {
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--inf-text);
    overflow-wrap: anywhere;
}

.ivi-note__title b[b-h62mue8mbb] {
    font-weight: 700;
}

.ivi-note__body[b-h62mue8mbb] {
    margin-top: 2px;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--inf-text-2);
    overflow-wrap: anywhere;
}

.ivi-note__meta[b-h62mue8mbb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--inf-text-2);
}

.ivi-note__kind[b-h62mue8mbb] {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--inf-neutral-bg);
    color: var(--inf-neutral);
    font-weight: 600;
}

.ivi-note__side[b-h62mue8mbb] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
}

.ivi-note__dot[b-h62mue8mbb] {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 4px;
    border-radius: 50%;
    background: var(--inf-error);
}

[b-h62mue8mbb] .ivi-note__chevron.mud-icon-root {
    color: var(--inf-text-3);
}

@media (max-width: 599.98px) {
    [b-h62mue8mbb] .ivi-note.mud-list-item {
        padding: 12px;
    }

    .ivi-note__row[b-h62mue8mbb] {
        gap: 10px;
    }

    .ivi-note__icon[b-h62mue8mbb] {
        width: 36px;
        height: 36px;
    }

    .ivi-notes-counter[b-h62mue8mbb] {
        margin-left: 0;
    }
}
/* /Components/Pages/Reports/Reports.razor.rz.scp.css */
/* Reports (DESIGN-ui-theme.md §5, mockups cus-05 / mgr-08): parameters row, KPI tiles, count bars, table. */

.report-params[b-5rmbyiwqwa] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px 16px;
}

.report-params__road[b-5rmbyiwqwa] {
    flex: 2 1 320px;
    min-width: 0;
}

.report-params__period[b-5rmbyiwqwa] {
    flex: 1 1 260px;
    min-width: 0;
}

.report-params__actions[b-5rmbyiwqwa] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 2px;
}

.report-charts[b-5rmbyiwqwa] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--inf-gap);
}

@media (max-width: 959.98px) {
    .report-charts[b-5rmbyiwqwa] { grid-template-columns: minmax(0, 1fr); }
}

/* One series, so no legend: the panel title names it. Bars ≤ 24 px, 4 px rounded data end, value at the tip. */
.report-bars[b-5rmbyiwqwa] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.report-bar[b-5rmbyiwqwa] {
    display: grid;
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.report-bar__label[b-5rmbyiwqwa] {
    font-size: 0.875rem;
    color: var(--inf-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-bar__track[b-5rmbyiwqwa] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.report-bar__fill[b-5rmbyiwqwa] {
    display: block;
    height: 12px;
    min-width: 2px;
    /* Proportional to the largest bar, leaving room for the value at the tip. */
    width: calc((100% - 48px) * var(--report-share, 0));
    background: var(--inf-primary);
    border-radius: 0 4px 4px 0;
}

.report-bar__value[b-5rmbyiwqwa] {
    flex: 0 0 auto;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--inf-text);
}

.report-overdue[b-5rmbyiwqwa] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--inf-error);
}

.report-empty[b-5rmbyiwqwa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* Four tiles share the row evenly (the shared row is laid out for five). */
@media (min-width: 600px) {
    .report-kpis[b-5rmbyiwqwa] { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}
/* /Components/Pages/Roads/FactRow.razor.rz.scp.css */
.road-fact[b-msop8xo13d] {
    padding: 2px 0;
}

.road-fact--wide[b-msop8xo13d] {
    grid-column: 1 / -1;
}

.road-fact__text[b-msop8xo13d] {
    min-width: 0;
}
/* /Components/Pages/Roads/Passport/ChainageStrip.razor.rz.scp.css */
/* «Линейный график» (SK3 §4.4). Data colours are allowed here (DESIGN-ui-theme.md §5 rule 9): an ordinal teal ramp
   for categories (light → dark, dark text on every step so contrast holds), the success/error tints for the
   normative pair, hatching for «нет данных». Every band also carries its text or a tooltip: colour is never alone. */

.pp-strip[b-r6wusbs8jw] {
    --pp-label-w: 132px;
    --pp-row-h: 24px;
    --pp-bars-h: 40px;
    --pp-cat-1: #e6f4f5;
    --pp-cat-2: #cfe9eb;
    --pp-cat-3: #b0dcdf;
    --pp-cat-4: #8ccbd0;
    --pp-cat-5: #66b7be;
    --pp-cat-6: #f0ecfb;
    min-width: 0;
}

.pp-strip--compact[b-r6wusbs8jw] {
    --pp-bars-h: 72px;
}

/* The strip scrolls inside its panel on a phone; the page never does. */
.pp-strip__scroll[b-r6wusbs8jw] {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--inf-radius);
}

.pp-strip__scroll:focus-visible[b-r6wusbs8jw] {
    outline: 2px solid var(--inf-focus);
    outline-offset: 2px;
}

.pp-strip__grid[b-r6wusbs8jw] {
    display: grid;
    grid-template-columns: var(--pp-label-w) minmax(0, 1fr);
    row-gap: 4px;
    min-width: 640px;
}

.pp-strip__label[b-r6wusbs8jw] {
    position: sticky;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    padding-right: 10px;
    background: var(--inf-surface);
    color: var(--inf-text-2);
    font-size: 0.75rem;
    line-height: 1.2;
    overflow: hidden;
    white-space: nowrap;
    min-width: 0;
}

/* VP-P-01: text-overflow does not reach the anonymous flex item, so the text sits in its own shrinkable span. */
.pp-strip__label-text[b-r6wusbs8jw] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pp-strip__label--axis[b-r6wusbs8jw] {
    font-weight: 600;
}

.pp-strip__axis[b-r6wusbs8jw] {
    position: relative;
    height: 20px;
    border-bottom: 1px solid var(--inf-divider);
}

.pp-axis-tick[b-r6wusbs8jw] {
    position: absolute;
    bottom: 2px;
    transform: translateX(-50%);
    font-size: 0.6875rem;
    color: var(--inf-text-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pp-axis-tick:first-child[b-r6wusbs8jw] {
    transform: none;
}

.pp-strip__track[b-r6wusbs8jw] {
    position: relative;
    height: var(--pp-row-h);
    background: var(--inf-surface-muted);
    border-radius: 4px;
    overflow: hidden;
}

.pp-strip__track--bars[b-r6wusbs8jw] {
    height: var(--pp-bars-h);
    background: var(--inf-surface-muted);
}

.pp-strip__track--ticks[b-r6wusbs8jw] {
    height: 22px;
    background: transparent;
    border-bottom: 1px dashed var(--inf-divider-soft);
    overflow: visible;
}

/* ---- bands ---- */

.pp-band[b-r6wusbs8jw] {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border-right: 1px solid var(--inf-surface);
    color: var(--inf-text);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}

.pp-tone--cat-1[b-r6wusbs8jw] { background: var(--pp-cat-1); }
.pp-tone--cat-2[b-r6wusbs8jw] { background: var(--pp-cat-2); }
.pp-tone--cat-3[b-r6wusbs8jw] { background: var(--pp-cat-3); }
.pp-tone--cat-4[b-r6wusbs8jw] { background: var(--pp-cat-4); }
.pp-tone--cat-5[b-r6wusbs8jw] { background: var(--pp-cat-5); }
.pp-tone--cat-6[b-r6wusbs8jw] { background: var(--pp-cat-6); color: var(--inf-accent); }
.pp-tone--success[b-r6wusbs8jw] { background: var(--inf-success-bg); color: var(--inf-success); box-shadow: inset 0 -3px 0 var(--inf-success); }
.pp-tone--error[b-r6wusbs8jw] { background: var(--inf-error-bg); color: var(--inf-error); box-shadow: inset 0 -3px 0 var(--inf-error); }

.pp-tone--none[b-r6wusbs8jw] {
    background: repeating-linear-gradient(135deg, var(--inf-neutral-bg) 0 6px, var(--inf-surface) 6px 10px);
    color: var(--inf-text-2);
    font-weight: 400;
}

/* ---- bars ---- */

.pp-bar[b-r6wusbs8jw] {
    position: absolute;
    bottom: 0;
    border-right: 1px solid var(--inf-surface);
    border-radius: 2px 2px 0 0;
}

.pp-bar.pp-tone--success[b-r6wusbs8jw] { background: #6cc19c; box-shadow: none; }
.pp-bar.pp-tone--error[b-r6wusbs8jw] { background: #e57373; box-shadow: none; }
.pp-bar.pp-tone--cat-3[b-r6wusbs8jw] { background: var(--pp-cat-5); }

.pp-norm[b-r6wusbs8jw] {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 2px dashed var(--inf-text);
    opacity: 0.7;
}

/* ---- ticks ---- */

.pp-ticks-empty[b-r6wusbs8jw] {
    position: absolute;
    left: 4px;
    top: 2px;
    color: var(--inf-text-2);
    font-size: 0.75rem;
}

.pp-tick[b-r6wusbs8jw] {
    position: absolute;
    top: 5px;
    display: block;
    height: 12px;
}

.pp-tick--point[b-r6wusbs8jw] {
    width: 10px;
    margin-left: -5px;
}

.pp-tick--range[b-r6wusbs8jw] {
    top: 7px;
    height: 8px;
    min-width: 3px;
    border-radius: 2px;
    background: var(--inf-primary);
    opacity: 0.85;
}

a.pp-tick:hover[b-r6wusbs8jw],
a.pp-tick:focus-visible[b-r6wusbs8jw] {
    outline: 2px solid var(--inf-focus);
    outline-offset: 1px;
}

.pp-tick--bridge.pp-tick--range[b-r6wusbs8jw] { background: #455a64; }
.pp-tick--bridge.pp-tick--point[b-r6wusbs8jw] { background: #455a64; border-radius: 2px; }
.pp-tick--tunnel[b-r6wusbs8jw] { background: #37474f; border-radius: 2px; }
.pp-tick--pipe[b-r6wusbs8jw] { border: 2px solid #1565c0; border-radius: 50%; width: 10px; height: 10px; }
.pp-tick--crosswalk[b-r6wusbs8jw] {
    background: repeating-linear-gradient(90deg, var(--inf-text) 0 2px, var(--inf-surface) 2px 4px);
    border: 1px solid var(--inf-text);
    border-radius: 2px;
}
.pp-tick--traffic_light[b-r6wusbs8jw] { width: 6px; margin-left: -3px; height: 14px; top: 4px; border-radius: 3px; background: #37474f; }
.pp-tick--lighting.pp-tick--range[b-r6wusbs8jw] { background: #f9a825; height: 4px; top: 9px; }
.pp-tick--lighting.pp-tick--point[b-r6wusbs8jw] { background: #f9a825; border-radius: 50%; }
.pp-tick--km_post[b-r6wusbs8jw] { width: 4px; margin-left: -2px; background: var(--inf-text); }
.pp-tick--service[b-r6wusbs8jw] { background: var(--inf-info-bg); border: 1px solid var(--inf-info); border-radius: 3px; }
/* §8.2: a km hot spot (≥ 3 accidents within 1 km) is a tinted range under the accident points of the same row. */
.pp-tick--hotspot.pp-tick--range[b-r6wusbs8jw] { background: var(--inf-error-bg); border: 1px solid var(--inf-error); top: 4px; height: 14px; border-radius: 3px; }
.pp-tick--accident[b-r6wusbs8jw] { background: var(--inf-accent); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.pp-tick--accident.pp-tick--fatal[b-r6wusbs8jw] { background: var(--inf-error); }
.pp-tick--twin[b-r6wusbs8jw] { background: var(--inf-accent); opacity: 0.75; }
.pp-tick--contract[b-r6wusbs8jw] { background: var(--inf-primary); opacity: 0.6; }
.pp-tick--defect[b-r6wusbs8jw] { background: var(--inf-warning); clip-path: polygon(0 0, 100% 0, 50% 100%); }

@media print {
    .pp-strip__scroll[b-r6wusbs8jw] { overflow: visible; }
    .pp-strip__grid[b-r6wusbs8jw] { min-width: 0; }
    .pp-band[b-r6wusbs8jw], .pp-bar[b-r6wusbs8jw], .pp-tick[b-r6wusbs8jw], .pp-strip__track[b-r6wusbs8jw] { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* /Components/Pages/Roads/Passport/PassportFact.razor.rz.scp.css */
.pp-fact[b-7lolye3qs7] {
    padding: 2px 0;
}

.pp-fact--wide[b-7lolye3qs7] {
    grid-column: 1 / -1;
}

.pp-fact__text[b-7lolye3qs7] {
    min-width: 0;
    flex: 1 1 auto;
}

.pp-fact__source[b-7lolye3qs7] {
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--inf-neutral-bg);
    color: var(--inf-text-2);
    font-size: 0.6875rem;
    font-weight: 500;
    white-space: nowrap;
    vertical-align: 1px;
}

.pp-runs[b-7lolye3qs7] {
    margin-top: 4px;
    font-size: 0.8125rem;
}

.pp-runs > summary[b-7lolye3qs7] {
    cursor: pointer;
    color: var(--inf-primary);
    font-weight: 500;
    min-height: 24px;
}

.pp-runs__scroll[b-7lolye3qs7] {
    max-height: 260px;
    overflow: auto;
    margin-top: 6px;
    border: 1px solid var(--inf-divider-soft);
    border-radius: 6px;
}

.pp-runs__table[b-7lolye3qs7] {
    width: 100%;
    border-collapse: collapse;
}

.pp-runs__table th[b-7lolye3qs7],
.pp-runs__table td[b-7lolye3qs7] {
    padding: 4px 8px;
    border-bottom: 1px solid var(--inf-divider-soft);
    text-align: left;
    white-space: nowrap;
}

.pp-runs__table th[b-7lolye3qs7] {
    position: sticky;
    top: 0;
    background: var(--inf-surface-muted);
    color: var(--inf-text-2);
    font-weight: 500;
    font-size: 0.75rem;
}

.pp-runs__table td:nth-child(3)[b-7lolye3qs7] {
    white-space: normal;
}

@media print {
    .pp-runs__scroll[b-7lolye3qs7] { max-height: none; overflow: visible; }
}
/* /Components/Pages/Roads/Passport/RoadAccidentsView.razor.rz.scp.css */
/* DESIGN-improve-20261015.md §8.2 «ДТП view»: the «ДТП» tab (KPI tiles, chips, two panels, the list, the СКДФ check)
   and its compact form inside the passport §11. Nothing scrolls page-wide at 390 px: the tables scroll inside their
   panels (MudTable switches to its stacked form below 600 px). The pp-* helpers repeat the passport's own rules
   (scoped CSS does not cross components). */

.ra[b-pioq371mkw] {
    display: flex;
    flex-direction: column;
    gap: var(--inf-gap);
    min-width: 0;
}

.ra--compact[b-pioq371mkw] {
    gap: 12px;
}

.ra[b-pioq371mkw]  .inf-kpi-row {
    margin-bottom: 0;
}

/* «ГИБДД + СКДФ» is text, not a figure: a smaller value that wraps instead of pushing the row past the page. */
.ra[b-pioq371mkw]  .ra-kpi-text .inf-kpi__value {
    font-size: 1.125rem;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
}

.ra[b-pioq371mkw]  .inf-kpi__text {
    min-width: 0;
}

.ra-summary[b-pioq371mkw],
.pp-years[b-pioq371mkw] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ra-pair[b-pioq371mkw] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--inf-gap);
    align-items: start;
}

@media (min-width: 1100px) {
    .ra-pair[b-pioq371mkw] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

.ra--compact .ra-pair[b-pioq371mkw] {
    gap: 12px 24px;
}

.ra-block[b-pioq371mkw] {
    min-width: 0;
}

.ra-block[b-pioq371mkw]  .ra-block__title {
    margin-bottom: 4px;
}

.ra-spots[b-pioq371mkw] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ra-spot[b-pioq371mkw] {
    padding: 8px 10px;
    border: 1px solid var(--inf-divider);
    border-left: 3px solid var(--inf-error);
    border-radius: var(--inf-radius);
    background: var(--inf-surface);
    font-size: 0.875rem;
}

.ra-spot__head[b-pioq371mkw] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
}

.ra-spot__ndu[b-pioq371mkw] {
    margin-top: 4px;
}

/* An НДУ name «по данным ГИБДД»: text on the warning tint (the text carries it, never the colour). Long names wrap. */
.ra-ndu[b-pioq371mkw] {
    display: inline-block;
    margin: 1px 4px 1px 0;
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--inf-warning-bg);
    color: var(--inf-warning);
    font-size: 0.75rem;
    line-height: 1.35;
}

.ra-ndu-cell[b-pioq371mkw] {
    min-width: 240px;
}

.ra-unreliable[b-pioq371mkw] {
    display: inline-block;
    margin-left: 4px;
    padding: 0 5px;
    border-radius: 6px;
    background: var(--inf-warning-bg);
    color: var(--inf-warning);
    font-weight: 600;
    cursor: help;
}

.ra-wrap[b-pioq371mkw] {
    min-width: 160px;
    overflow-wrap: anywhere;
}

.ra[b-pioq371mkw]  .ra-accidents .mud-table-container,
.ra[b-pioq371mkw]  .pp-accidents .mud-table-container {
    overflow-x: auto;
}

.ra[b-pioq371mkw]  .ra-accidents .mud-table-cell .inf-status,
.ra[b-pioq371mkw]  .ra-table .inf-status {
    margin: 2px 4px 2px 0;
}

/* The compact (passport) list: the first rows on screen, every row in print. */
.ra-row--more[b-pioq371mkw] {
    display: none;
}

.pp-note[b-pioq371mkw] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    color: var(--inf-text-2);
    font-size: 0.8125rem;
}

.ra-source[b-pioq371mkw] {
    margin-top: 0;
}

.pp-small[b-pioq371mkw] {
    font-size: 0.75rem;
    font-weight: 400;
}

.pp-facts[b-pioq371mkw] {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px 24px;
}

.pp-table-scroll[b-pioq371mkw] {
    max-width: 100%;
    overflow-x: auto;
}

.pp-right[b-pioq371mkw] {
    text-align: right !important;
}

.pp-nowrap[b-pioq371mkw] {
    white-space: nowrap;
}

/* Round-2 V2-3: below MudTable's breakpoint every row is a card of «label — value» lines. Each cell's content sits in
   ONE .ra-v span, so the flex line is the label plus a value box that wraps inside the card (several children of a
   flex cell would lie side by side and push the card past its panel: 558 px in a 364 px container at 390 px). */
@media (max-width: 600px) {
    .ra[b-pioq371mkw]  .mud-xs-table .mud-table-cell {
        gap: 12px;
        min-width: 0;
        white-space: normal;
    }

    .ra[b-pioq371mkw]  .mud-xs-table .mud-table-cell::before {
        flex: 0 0 auto;
        max-width: 45%;
        padding-right: 0;
        padding-inline-end: 0;
    }

    .ra-v[b-pioq371mkw] {
        flex: 1 1 auto;
        min-width: 0;
        text-align: right;
        overflow-wrap: anywhere;
    }

    .ra-v .pp-nowrap[b-pioq371mkw] {
        white-space: normal;
    }
}

@media print {
    .ra-row--more[b-pioq371mkw] {
        display: table-row;
    }

    .ra-spot[b-pioq371mkw], .ra-ndu[b-pioq371mkw], .ra-unreliable[b-pioq371mkw] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}
/* /Components/Pages/Roads/Passport/RoadPassport.razor.rz.scp.css */
/* «Паспорт дороги» (SK3 §4.3/§4.5): strip and long sections full width; short fact panels in a two-column grid at
   ≥ 1280 px (2|3, 4|5, 6|13), one column below; nothing scrolls page-wide at 390 px (tables and the strip scroll
   inside their panels). */

.pp-page[b-50kxky1lg2] {
    display: flex;
    flex-direction: column;
    gap: var(--inf-gap);
    min-width: 0;
}

.pp-page[b-50kxky1lg2]  .inf-page-header {
    margin-bottom: 4px;
}

.pp-page[b-50kxky1lg2]  .inf-kpi-row {
    margin-bottom: 0;
}

.pp-page[b-50kxky1lg2] >  .inf-panel {
    scroll-margin-top: 80px;
}

.pp-grid[b-50kxky1lg2] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--inf-gap);
    align-items: start;
}

.pp-grid[b-50kxky1lg2]  .inf-panel {
    scroll-margin-top: 80px;
}

@media (min-width: 1280px) {
    .pp-grid[b-50kxky1lg2] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

.pp-facts[b-50kxky1lg2] {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px 24px;
}

/* ---- contents ---- */

.pp-contents[b-50kxky1lg2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 2px 0 6px;
}

/* On a phone the chips stay one row and scroll sideways inside the bar (never the page). */
@media (max-width: 599.98px) {
    .pp-contents[b-50kxky1lg2] {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: thin;
    }
}

.pp-contents__title[b-50kxky1lg2] {
    flex: 0 0 auto;
    color: var(--inf-text-2);
    font-size: 0.8125rem;
}

.pp-contents__chip[b-50kxky1lg2] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--inf-border-control);
    border-radius: 999px;
    background: var(--inf-surface);
    color: var(--inf-text);
    font-size: 0.8125rem;
    text-decoration: none;
    white-space: nowrap;
}

.pp-contents__chip:hover[b-50kxky1lg2],
.pp-contents__chip:focus-visible[b-50kxky1lg2] {
    border-color: var(--inf-primary);
    color: var(--inf-primary);
}

/* ---- strip window ---- */

.pp-window[b-50kxky1lg2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.pp-window[b-50kxky1lg2]  .pp-window__field {
    width: 104px;
    margin: 0;
}

.pp-legend[b-50kxky1lg2] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 10px;
    font-size: 0.75rem;
}

.pp-legend span[b-50kxky1lg2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pp-swatch[b-50kxky1lg2] {
    display: inline-block;
    width: 16px;
    height: 10px;
    border-radius: 2px;
}

.pp-swatch--success[b-50kxky1lg2] { background: var(--inf-success-bg); box-shadow: inset 0 -3px 0 var(--inf-success); }
.pp-swatch--error[b-50kxky1lg2] { background: var(--inf-error-bg); box-shadow: inset 0 -3px 0 var(--inf-error); }
.pp-swatch--none[b-50kxky1lg2] { background: repeating-linear-gradient(135deg, var(--inf-neutral-bg) 0 4px, var(--inf-surface) 4px 7px); border: 1px solid var(--inf-divider); }
.pp-swatch--norm[b-50kxky1lg2] { height: 0; border-top: 2px dashed var(--inf-text); border-radius: 0; }
.pp-swatch--hotspot[b-50kxky1lg2] { background: var(--inf-error-bg); border: 1px solid var(--inf-error); }

/* ---- mismatches ---- */

.pp-mismatches[b-50kxky1lg2] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pp-mismatch[b-50kxky1lg2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
}

/* A mismatch pill carries a whole sentence («Городская среда: …»): let it wrap instead of pushing the page wide. */
.pp-mismatch[b-50kxky1lg2]  .inf-status {
    white-space: normal;
    overflow-wrap: anywhere;
    border-radius: 12px;
}

.pp-mismatch__note[b-50kxky1lg2] {
    font-size: 0.8125rem;
    min-width: 0;
}

/* ---- notes, lists ---- */

.pp-note[b-50kxky1lg2] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    color: var(--inf-text-2);
    font-size: 0.8125rem;
}

.pp-small[b-50kxky1lg2] {
    font-size: 0.75rem;
    font-weight: 400;
}

.pp-fact-source[b-50kxky1lg2] {
    color: var(--inf-text-2);
    font-weight: 400;
}

.pp-list[b-50kxky1lg2] {
    margin: 2px 0 0;
    padding-left: 18px;
    font-weight: 400;
}

.pp-condition-summary[b-50kxky1lg2],
.pp-years[b-50kxky1lg2] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pp-years[b-50kxky1lg2] {
    margin-bottom: 8px;
}

.pp-kmlist[b-50kxky1lg2] {
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

/* ---- tables ---- */

.pp-table-scroll[b-50kxky1lg2] {
    max-width: 100%;
    overflow-x: auto;
}

.pp-right[b-50kxky1lg2] {
    text-align: right !important;
}

.pp-nowrap[b-50kxky1lg2] {
    white-space: nowrap;
}

.pp-break[b-50kxky1lg2] {
    overflow-wrap: anywhere;
    min-width: 140px;
}

.pp-page[b-50kxky1lg2]  .pp-accidents .mud-table-container {
    overflow-x: auto;
}

/* ---- twins ---- */

.pp-twins[b-50kxky1lg2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--inf-gap);
}

.pp-twin[b-50kxky1lg2] {
    padding: 14px 16px;
    border: 1px solid var(--inf-divider);
    border-radius: var(--inf-radius);
    background: var(--inf-surface);
    font-size: 0.875rem;
}

.pp-twin__head[b-50kxky1lg2] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.pp-twin__line[b-50kxky1lg2] {
    margin-top: 4px;
    overflow-wrap: anywhere;
}

.pp-attribution[b-50kxky1lg2] {
    margin-top: 16px;
    color: var(--inf-text-2);
    font-size: 0.75rem;
}

@media (max-width: 599.98px) {
    .pp-window[b-50kxky1lg2]  .pp-window__field {
        width: 92px;
    }

    /* «min / mean / max» values do not fit two tiles per row at 390 px. */
    .pp-diag-tiles[b-50kxky1lg2] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Pages/Roads/RoadDetail.razor.rz.scp.css */
/* The one road page /roads/{id} (DESIGN-improve-20261015.md §8.2; DESIGN-ui-theme.md §5.4): the header, then page tabs
   on the canvas («Обзор» · «Паспорт» · «ДТП», like «Проверка ИИ»); each tab brings its own panels. */

.road-page[b-5dkcgwkq40] {
    display: flex;
    flex-direction: column;
    gap: var(--inf-gap);
    min-width: 0;
}

/* The header brings its own bottom margin; the flex gap replaces it. */
.road-page[b-5dkcgwkq40]  .inf-page-header {
    margin-bottom: 4px;
}

/* A СКДФ label can run to 150 characters: a long one gets a smaller title so it does not fill the first screen. */
.road-page[b-5dkcgwkq40]  .road-header--long .inf-page-header__title {
    font-size: 1.375rem;
    line-height: 1.3;
}

.road-tabs[b-5dkcgwkq40] {
    min-width: 0;
}

.road-tabs[b-5dkcgwkq40]  > .mud-tabs > .mud-tabs-tabbar {
    background: transparent;
    border-radius: 0;
    border-bottom: 1px solid var(--inf-divider);
}

.road-tabs[b-5dkcgwkq40]  > .mud-tabs > .mud-tabs-tabbar .mud-tab {
    min-height: 48px;
    color: var(--inf-text-2);
}

.road-tabs[b-5dkcgwkq40]  > .mud-tabs > .mud-tabs-tabbar .mud-tab.mud-tab-active {
    color: var(--inf-primary);
}

.road-tabs[b-5dkcgwkq40]  .road-tab-panels {
    padding-top: 16px;
}

@media (max-width: 599.98px) {
    /* Three tabs fit 390 px without the scroll buttons. */
    .road-tabs[b-5dkcgwkq40]  > .mud-tabs > .mud-tabs-tabbar .mud-tab {
        min-width: 0 !important;
        padding-left: 10px;
        padding-right: 10px;
    }
}
/* /Components/Pages/Roads/RoadOverview.razor.rz.scp.css */
/* «Обзор», the default tab of /roads/{id} (DESIGN-ui-theme.md §5.4, mockup adm-02 right panel): the registry record as
   a facts grid beside the mini map, the editors and the curators in panels, the linked lists in a tabbed panel. */

.road-overview[b-ssrnwlnxs8] {
    display: flex;
    flex-direction: column;
    gap: var(--inf-gap);
    min-width: 0;
}

.road-top[b-ssrnwlnxs8] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--inf-gap);
    align-items: start;
}

.road-top--map[b-ssrnwlnxs8] {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.road-facts[b-ssrnwlnxs8] {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px 24px;
}

.road-overview[b-ssrnwlnxs8]  .road-map-panel {
    overflow: hidden;
    position: sticky;
    top: 80px;
}

.road-map[b-ssrnwlnxs8] {
    display: block;
    border-top: 1px solid var(--inf-divider-soft);
}

/* The derived «Городской» value is a MudText (no scope attribute of its own): reach it through the plain wrapper. */
.road-derived[b-ssrnwlnxs8]  .road-derived__value {
    font-weight: 600;
}

.road-notes[b-ssrnwlnxs8] {
    margin-top: 12px;
}

.road-pair[b-ssrnwlnxs8] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--inf-gap);
    align-items: start;
}

.road-single[b-ssrnwlnxs8] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--inf-gap);
}

.road-single:empty[b-ssrnwlnxs8] {
    display: none;
}

.road-inline-form[b-ssrnwlnxs8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.road-inline-form__field[b-ssrnwlnxs8] {
    flex: 1 1 260px;
    min-width: 0;
}

.road-curator-name[b-ssrnwlnxs8] {
    font-weight: 500;
}

.road-nowrap[b-ssrnwlnxs8] {
    white-space: nowrap;
}

/* Tabs as the related panel's header: the tab bar sits on the panel's top edge. */
.road-overview[b-ssrnwlnxs8]  .road-related .mud-tabs-tabbar {
    border-radius: var(--inf-radius) var(--inf-radius) 0 0;
    background: transparent;
}

.road-overview[b-ssrnwlnxs8]  .road-related .mud-tab .mud-icon-root {
    font-size: 1.125rem;
}

.road-overview[b-ssrnwlnxs8]  .road-table {
    border-radius: var(--inf-radius);
}

@media (max-width: 1099.98px) {
    .road-top--map[b-ssrnwlnxs8] {
        grid-template-columns: minmax(0, 1fr);
    }

    .road-overview[b-ssrnwlnxs8]  .road-map-panel {
        position: static;
    }

    .road-pair[b-ssrnwlnxs8] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 599.98px) {
    .road-facts[b-ssrnwlnxs8] {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }
}
/* /Components/Pages/Roads/Roads.razor.rz.scp.css */
/* /roads in the ИНФОДОР style (DESIGN-ui-theme.md §5, mockup adm-02): KPI row, filter panel, table panel. */

/* Four tiles share the row (auto-fit: no empty fifth track at 1440 px). */
.roads-kpis[b-ikcjf99noh] {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

/* A tile whose filter is the current one reads as selected (tint + teal border), like a chosen facet. */
.roads-page[b-ikcjf99noh]  .roads-kpi--active {
    border-color: var(--inf-primary);
    background: var(--inf-primary-tint);
}

.roads-page[b-ikcjf99noh]  .roads-filters {
    margin-bottom: var(--inf-gap);
}

.roads-search[b-ikcjf99noh] {
    flex: 1 1 280px;
    min-width: 220px;
    max-width: 440px;
}

.roads-page[b-ikcjf99noh]  .roads-found {
    color: var(--inf-text-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Road name: the full СКДФ label wraps over at most a comfortable width; the geometry mark sits after it. */
.roads-page[b-ikcjf99noh]  .roads-name-cell {
    min-width: 220px;
}

/* Eight columns at 1440 px: a little less side padding per cell so the list fits its panel (it scrolls inside the
   panel when it cannot). */
.roads-page[b-ikcjf99noh]  .roads-table .mud-table-cell {
    padding-left: 10px;
    padding-right: 10px;
}

.roads-page[b-ikcjf99noh]  .roads-table .mud-table-cell:first-child {
    padding-left: 16px;
}

.roads-name[b-ikcjf99noh] {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

/* A СКДФ label can run to 300 characters and its tail is often what tells two parts apart, so the list wraps the
   whole label (as before the redesign) instead of clamping it — a tooltip is no way to read it on a touch screen. */
.roads-name__label[b-ikcjf99noh] {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--inf-primary);
    font-weight: 500;
}

.roads-geo[b-ikcjf99noh] {
    display: inline-flex;
    flex: 0 0 auto;
    margin-top: 1px;
}

.roads-category[b-ikcjf99noh] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
}

.roads-category__value[b-ikcjf99noh] {
    font-weight: 500;
    white-space: nowrap;
}

/* «Категория не подтверждена» may wrap inside its pill so the category column stays narrow. */
.roads-page[b-ikcjf99noh]  .roads-unconfirmed.mud-chip {
    height: auto;
    min-height: 24px;
    padding-top: 2px;
    padding-bottom: 2px;
    border-radius: 12px;
    white-space: normal;
    line-height: 1.25;
    max-width: 132px;
}

.roads-page[b-ikcjf99noh]  .roads-unconfirmed .mud-chip-content {
    white-space: normal;
    text-align: left;
}

.roads-nowrap[b-ikcjf99noh] {
    white-space: nowrap;
}

.roads-page[b-ikcjf99noh]  .roads-num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 599.98px) {
    .roads-kpis[b-ikcjf99noh] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .roads-search[b-ikcjf99noh] {
        flex-basis: 100%;
        min-width: 0;
        max-width: none;
    }

    .roads-page[b-ikcjf99noh]  .roads-name-cell {
        min-width: 0;
        max-width: none;
    }
}
/* /Components/Pages/Twin/TwinAttribution.razor.rz.scp.css */
/* /twin/attribution: the sign-icon licence table in a flush panel with its search in the table toolbar. */
.twin-attribution-search[b-kks7rhhxda] {
    flex: 1 1 280px;
    max-width: 440px;
}

.twin-attribution-icon[b-kks7rhhxda] {
    display: block;
    height: 32px;
    width: auto;
}

.twin-attribution-code[b-kks7rhhxda] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
/* /Components/Pages/Twin/TwinFacts.razor.rz.scp.css */
/* The twin's provenance under the legend: a quiet label / value grid (inf-facts typography). */
.twin-facts[b-tdrhcmehjd] {
    display: grid;
    grid-template-columns: minmax(104px, auto) 1fr;
    gap: 6px 12px;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.twin-facts > div[b-tdrhcmehjd] {
    display: contents;
}

.twin-facts span[b-tdrhcmehjd] {
    color: var(--inf-text-2);
}

.twin-facts b[b-tdrhcmehjd] {
    font-weight: 600;
    color: var(--inf-text);
    overflow-wrap: anywhere;
}
/* /Components/Pages/Twin/TwinList.razor.rz.scp.css */
/* The twin cards of /twin and /twin/roads/{id} (mockup adm-03 «Двойники (последние)»): a tinted map icon, the take
   with its status, the take time, the object counts and the placement method. */
.twin-cards[b-66luexxu8g] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
    gap: 12px;
}

.twin-card[b-66luexxu8g] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--inf-divider);
    border-radius: var(--inf-radius);
    background: var(--inf-surface);
    color: var(--inf-text);
    text-decoration: none;
    min-width: 0;
    transition: border-color 0.12s ease, background-color 0.12s ease;
}

.twin-card:hover[b-66luexxu8g] {
    border-color: var(--inf-primary);
    color: var(--inf-text);
}

.twin-card:focus-visible[b-66luexxu8g] {
    outline: 3px solid var(--inf-focus);
    outline-offset: 2px;
}

.twin-card-selected[b-66luexxu8g] {
    border-color: var(--inf-primary);
    background: var(--inf-primary-tint);
    box-shadow: inset 0 0 0 1px var(--inf-primary);
}

.twin-card-icon[b-66luexxu8g] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 10px;
}

.twin-card-icon--success[b-66luexxu8g] { background: var(--inf-success-bg); color: var(--inf-success); }
.twin-card-icon--warning[b-66luexxu8g] { background: var(--inf-warning-bg); color: var(--inf-warning); }
.twin-card-icon--error[b-66luexxu8g] { background: var(--inf-error-bg); color: var(--inf-error); }

.twin-card-body[b-66luexxu8g] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.twin-card-head[b-66luexxu8g] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    min-width: 0;
}

.twin-card-title[b-66luexxu8g] {
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.twin-card-date[b-66luexxu8g] {
    font-size: 0.8125rem;
    color: var(--inf-text-2);
    font-variant-numeric: tabular-nums;
}

.twin-card-stats[b-66luexxu8g] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, auto));
    justify-content: start;
    gap: 6px 0;
    margin: 8px 0 4px;
}

.twin-stat[b-66luexxu8g] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 0 14px;
    border-left: 1px solid var(--inf-divider);
    min-width: 0;
}

.twin-stat:first-child[b-66luexxu8g] {
    padding-left: 0;
    border-left: 0;
}

.twin-stat[b-66luexxu8g]  .twin-stat-icon {
    color: var(--inf-text-2);
    margin-top: 1px;
}

.twin-stat b[b-66luexxu8g] {
    display: block;
    font-weight: 700;
    font-size: 0.9375rem;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.twin-stat small[b-66luexxu8g] {
    display: block;
    font-size: 0.75rem;
    color: var(--inf-text-2);
    line-height: 1.3;
}

.twin-card-line[b-66luexxu8g] {
    font-size: 0.8125rem;
    color: var(--inf-text-2);
    overflow-wrap: anywhere;
}

@media (max-width: 599.98px) {
    .twin-card[b-66luexxu8g] {
        padding: 12px;
        gap: 10px;
    }

    .twin-card-icon[b-66luexxu8g] {
        width: 40px;
        height: 40px;
    }

    .twin-card-stats[b-66luexxu8g] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 0;
    }

    .twin-stat:nth-child(3)[b-66luexxu8g] {
        padding-left: 0;
        border-left: 0;
    }
}
/* /Components/Pages/Twin/TwinObjectDetails.razor.rz.scp.css */
.twin-details-icon[b-xnromupbey] {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.twin-details-head[b-xnromupbey] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--inf-divider-soft);
}

.twin-details-title[b-xnromupbey] {
    flex: 1 1 auto;
    min-width: 0;
}

.twin-details-head[b-xnromupbey]  .mud-icon-button {
    color: var(--inf-text-2);
}

.twin-details[b-xnromupbey]  .twin-details-caption {
    display: block;
    margin: 16px 0 6px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--inf-text-2);
}

.twin-facts[b-xnromupbey] {
    display: grid;
    grid-template-columns: minmax(104px, auto) 1fr;
    gap: 6px 12px;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.twin-facts > div[b-xnromupbey] {
    display: contents;
}

.twin-facts span[b-xnromupbey] {
    color: var(--inf-text-2);
}

.twin-facts b[b-xnromupbey] {
    font-weight: 600;
    color: var(--inf-text);
    overflow-wrap: anywhere;
}

.twin-evidence[b-xnromupbey] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    margin-top: 4px;
}

.twin-evidence figure[b-xnromupbey] {
    margin: 0;
}

.twin-evidence img[b-xnromupbey] {
    display: block;
    width: 100%;
    max-height: 160px;
    object-fit: contain;
    background: var(--inf-neutral-bg);
    border: 1px solid var(--inf-divider);
    border-radius: var(--inf-radius);
}

.twin-evidence a:hover img[b-xnromupbey],
.twin-evidence a:focus-visible img[b-xnromupbey] {
    border-color: var(--inf-primary);
}

.twin-evidence figcaption[b-xnromupbey] {
    font-size: 0.75rem;
    color: var(--inf-text-2);
    margin-top: 4px;
}

.twin-json[b-xnromupbey] {
    font-size: 0.6875rem;
    padding: 8px;
    border-radius: 6px;
    background: var(--inf-surface-muted);
    color: var(--inf-text);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 260px;
    overflow: auto;
    margin: 4px 0 0;
}

/* The map draws review objects in magenta (a data colour; the СКДФ axis owns orange): the block wears the same. */
.twin-review[b-xnromupbey] {
    border: 1px dashed #d81b60;
    border-left: 4px solid #d81b60;
    border-radius: var(--inf-radius);
    padding: 8px 10px;
    background: rgba(216, 27, 96, 0.06);
    font-size: 0.8125rem;
}

.twin-review-low[b-xnromupbey] {
    color: #ad1457;
    font-size: 0.75rem;
    font-weight: 600;
}

.twin-review-caption[b-xnromupbey] {
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--inf-text-2);
}

.twin-review-reasons[b-xnromupbey] {
    margin: 2px 0 0;
    padding-left: 18px;
    overflow-wrap: anywhere;
}

.twin-review-suggestion[b-xnromupbey] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    overflow-wrap: anywhere;
}

.twin-review-icon[b-xnromupbey] {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex: none;
}

.twin-review[b-xnromupbey]  .twin-review-chip {
    background-color: #d81b60;
    color: #fff;
}

.twin-review[b-xnromupbey]  .twin-review-chip .mud-icon-root {
    color: #fff;
}

.twin-review-note[b-xnromupbey] {
    margin-top: 2px;
    font-size: 0.75rem;
    color: var(--inf-text-2);
    overflow-wrap: anywhere;
}

/* Track TP re-check R1: a road surface polygon says whether it was seen or estimated, and how. The estimated one wears
   the map's diagonal hatch as its background. */
.twin-surface[b-xnromupbey] {
    border: 1px solid var(--inf-divider);
    border-left: 4px solid var(--inf-text-2);
    border-radius: var(--inf-radius);
    padding: 8px 10px;
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

.twin-surface.is-estimated[b-xnromupbey] {
    border-style: dashed;
    border-left-style: solid;
    background: repeating-linear-gradient(135deg, rgba(128, 134, 140, 0.16) 0 2px, transparent 2px 8px);
}

.twin-surface-facts[b-xnromupbey] {
    margin: 4px 0 0;
    padding-left: 18px;
}

.twin-surface-facts span[b-xnromupbey] {
    color: var(--inf-text-2);
}
/* /Components/Pages/Twin/TwinPage.razor.rz.scp.css */
/* /twin/{id}: the header carries the twin's status and its roads; a long СКДФ road label must not widen the page at
   phone width — the chip shrinks and ellipsises (its title has it all). */
.twin-page[b-3zxd5iahze] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.twin-page[b-3zxd5iahze]  .twin-road-chip {
    max-width: 100%;
    min-width: 0;
}

.twin-page[b-3zxd5iahze]  .twin-road-chip .mud-chip-content {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

/* Fix VR-06: the chip content is a flex box, where text-overflow does nothing — the label is its own span, the one that
   ellipsises. */
.twin-page[b-3zxd5iahze]  .twin-road-chip__label {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Pages/Twin/TwinPlacementPanel.razor.rz.scp.css */
/* The manual placement panel (DESIGN-digital-twin.md §4) in the ИНФОДОР style: the pipeline's candidates as
   selectable cards (current = teal marker, the pipeline's choice tagged success, a refuted one dashed in error),
   then the reference road, the three fields, the nudge row and the save action. */
.twin-placement-grid[b-fld6fu6u6h] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.twin-placement-grid > :last-child[b-fld6fu6u6h] {
    grid-column: 1 / -1;
}

.twin-nudge[b-fld6fu6u6h] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    border: 1px solid var(--inf-divider);
    border-radius: var(--inf-radius);
    background: var(--inf-surface-muted);
}

.twin-nudge[b-fld6fu6u6h]  .mud-icon-button {
    width: 40px;
    height: 40px;
    color: var(--inf-text-2);
}

.twin-nudge[b-fld6fu6u6h]  .mud-icon-button:hover {
    color: var(--inf-primary);
    background: var(--inf-primary-tint);
}

.twin-nudge[b-fld6fu6u6h]  .twin-step {
    max-width: 160px;
    margin-left: 4px;
}

.twin-candidates[b-fld6fu6u6h] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.twin-candidate[b-fld6fu6u6h] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--inf-divider);
    border-radius: var(--inf-radius);
    background: var(--inf-surface);
    color: var(--inf-text);
    font: inherit;
    font-size: 0.8125rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.12s ease, background-color 0.12s ease;
}

.twin-candidate:hover[b-fld6fu6u6h] {
    border-color: var(--inf-primary);
    background: var(--inf-hover);
}

.twin-candidate:focus-visible[b-fld6fu6u6h] {
    outline: 3px solid var(--inf-focus);
    outline-offset: 2px;
}

.twin-candidate.is-current[b-fld6fu6u6h] {
    border-color: var(--inf-primary);
    background: var(--inf-primary-tint);
    box-shadow: inset 3px 0 0 var(--inf-primary);
}

.twin-candidate-head[b-fld6fu6u6h] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
}

/* Track TP re-check R3: the pipeline's choice and its refuted rival. */
.twin-candidate-tag[b-fld6fu6u6h] {
    padding: 0 8px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
}

.twin-candidate-tag.is-selected[b-fld6fu6u6h] {
    background: var(--inf-success-bg);
    color: var(--inf-success);
}

.twin-candidate.is-rejected[b-fld6fu6u6h] {
    border-style: dashed;
    border-color: var(--inf-error);
    background: var(--inf-error-bg);
}

.twin-candidate.is-rejected.is-current[b-fld6fu6u6h] {
    box-shadow: inset 3px 0 0 var(--inf-error);
}

.twin-candidate-rejected[b-fld6fu6u6h] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--inf-error);
    overflow-wrap: anywhere;
}

.twin-candidate-fit[b-fld6fu6u6h],
.twin-candidate-where[b-fld6fu6u6h],
.twin-candidate-parts[b-fld6fu6u6h] {
    font-size: 0.75rem;
    color: var(--inf-text-2);
    overflow-wrap: anywhere;
}

.twin-placement[b-fld6fu6u6h]  .twin-placement-hint {
    color: var(--inf-text-2);
}

.twin-placement[b-fld6fu6u6h]  .twin-placement-caption {
    display: block;
    margin-bottom: 2px;
}

.twin-placement-actions[b-fld6fu6u6h] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
/* /Components/Pages/Twin/TwinRoad.razor.rz.scp.css */
/* /twin/roads/{id} (mockup adm-03 right column): the road's header with its registry facts, the twins as cards, the
   selected twin in the viewer. */
.twin-road-page[b-ruplufdujj] {
    display: flex;
    flex-direction: column;
    gap: var(--inf-gap);
    min-width: 0;
}

.twin-road-page[b-ruplufdujj]  .inf-page-header {
    margin-bottom: 4px;
}

.twin-road-meta[b-ruplufdujj] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    color: var(--inf-text-2);
    font-size: 0.875rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.twin-road-meta__dot[b-ruplufdujj] {
    color: var(--inf-text-3);
}

.twin-road-page[b-ruplufdujj]  .twin-road-card-link {
    margin-left: 4px;
    white-space: nowrap;
}
/* /Components/Pages/Twin/TwinRoads.razor.rz.scp.css */
/* /twin in the ИНФОДОР style (DESIGN-ui-theme.md §5, mockups adm-03 / mgr-10): the twins as cards, then the СКДФ
   road list with its filters in one panel. */

.twin-roads-page[b-7so22jhzoy] {
    display: flex;
    flex-direction: column;
    gap: var(--inf-gap);
    min-width: 0;
}

.twin-roads-page[b-7so22jhzoy]  .inf-page-header {
    margin-bottom: 4px;
}

.twin-roads-page[b-7so22jhzoy]  .twin-roads-found {
    color: var(--inf-text-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.twin-roads-filters[b-7so22jhzoy] {
    padding: 0 16px 14px;
    border-bottom: 1px solid var(--inf-divider-soft);
}

.twin-roads-search[b-7so22jhzoy] {
    flex: 1 1 280px;
    min-width: 220px;
    max-width: 440px;
}

.twin-roads-page[b-7so22jhzoy]  .twin-roads-name-cell {
    min-width: 240px;
}

.twin-roads-name[b-7so22jhzoy] {
    color: var(--inf-primary);
    font-weight: 500;
}

.twin-roads-geo[b-7so22jhzoy] {
    display: inline-flex;
    vertical-align: middle;
    margin-left: 4px;
}

.twin-roads-nowrap[b-7so22jhzoy] {
    white-space: nowrap;
}

.twin-roads-page[b-7so22jhzoy]  .twin-roads-num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 599.98px) {
    .twin-roads-filters[b-7so22jhzoy] {
        padding: 0 12px 12px;
    }

    .twin-roads-search[b-7so22jhzoy] {
        flex-basis: 100%;
        min-width: 0;
        max-width: none;
    }

    .twin-roads-page[b-7so22jhzoy]  .twin-roads-name-cell {
        min-width: 0;
    }
}
/* /Components/Pages/Twin/TwinSkdfDetails.razor.rz.scp.css */
/* DESIGN-improve-20261015.md §3 T: the СКДФ details panel. СКДФ = the comparison accent (--inf-accent, «analytics /
   comparison, never severity»); only the match note uses success/warning (DESIGN-ui-theme.md tokens). */
.twin-skdf-head[b-l5cn8kuxlz] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--inf-divider-soft);
}

.twin-skdf-icon[b-l5cn8kuxlz] {
    flex: 0 0 auto;
    width: 40px;
    height: 28px;
}

.twin-skdf-title[b-l5cn8kuxlz] {
    flex: 1 1 auto;
    min-width: 0;
}

.twin-skdf-head[b-l5cn8kuxlz]  .mud-icon-button {
    color: var(--inf-text-2);
}

.twin-skdf-match[b-l5cn8kuxlz] {
    padding: 10px 12px;
    border-radius: 8px;
    border-left: 4px solid var(--inf-accent);
    background: var(--inf-accent-bg);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.twin-skdf-match--success[b-l5cn8kuxlz] { border-left-color: var(--inf-success); background: var(--inf-success-bg); }
.twin-skdf-match--warning[b-l5cn8kuxlz] { border-left-color: var(--inf-warning); background: var(--inf-warning-bg); }
.twin-skdf-match--none[b-l5cn8kuxlz] { border-left-color: var(--inf-text-2); background: var(--inf-surface-muted); }

.twin-skdf-badge[b-l5cn8kuxlz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    font-size: 0.75rem;
    background: var(--inf-accent);
}

.twin-skdf-match--success .twin-skdf-badge[b-l5cn8kuxlz] { background: var(--inf-success); }
.twin-skdf-match--warning .twin-skdf-badge[b-l5cn8kuxlz] { background: var(--inf-warning); }
.twin-skdf-match--none .twin-skdf-badge[b-l5cn8kuxlz] { background: var(--inf-text-2); }

.twin-skdf-explain[b-l5cn8kuxlz] {
    margin-top: 4px;
    color: var(--inf-text);
}

.twin-skdf-facts[b-l5cn8kuxlz] {
    display: grid;
    grid-template-columns: minmax(104px, auto) 1fr;
    gap: 6px 12px;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.twin-skdf-facts > div[b-l5cn8kuxlz] {
    display: contents;
}

.twin-skdf-facts span[b-l5cn8kuxlz] {
    color: var(--inf-text-2);
}

.twin-skdf-facts b[b-l5cn8kuxlz] {
    font-weight: 600;
    color: var(--inf-text);
    overflow-wrap: anywhere;
}

.twin-skdf-foot[b-l5cn8kuxlz] {
    padding-top: 10px;
    border-top: 1px solid var(--inf-divider-soft);
    font-size: 0.75rem;
    color: var(--inf-text-2);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/* /Components/Pages/Twin/TwinViewer.razor.rz.scp.css */
/* The twin viewer's chrome in the ИНФОДОР style (DESIGN-ui-theme.md §5.7/5.9, mockups adm-03 / mgr-10): one white
   panel with the layer toolbar on top, the canvas map and the side panel (legend, object, placement). The canvas keeps
   its own data colours (BACKGROUND #dfe3da, ГОСТ signs and markings, the magenta review look, the orange СКДФ axis). */
.twin-shell[b-053usy9ueq] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--inf-surface);
    border: 1px solid var(--inf-divider);
    border-radius: var(--inf-radius);
    box-shadow: var(--inf-shadow-card);
}

.twin-shell[b-053usy9ueq] >  .mud-progress-linear,
.twin-shell[b-053usy9ueq] >  .mud-alert {
    margin: 12px;
}

.twin-alerts[b-053usy9ueq] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 12px 0;
}

.twin-toolbar[b-053usy9ueq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--inf-divider);
}

.twin-toolbar-caption[b-053usy9ueq] {
    margin-right: 4px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--inf-text-2);
}

.twin-layers[b-053usy9ueq] {
    display: flex;
    flex: 1 1 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: min(100%, 280px);
}

.twin-layers[b-053usy9ueq]  .mud-chip {
    margin: 0;
}

/* On/off must read without the tint (requirements §11.5): an «on» layer is the tint plus a border in its own text
   colour and a trailing check mark; an «off» one is a quiet white pill with a light border and secondary text, so a
   switched-off layer never looks heavier than a switched-on one. */
.twin-layers[b-053usy9ueq]  .twin-layer--on.mud-chip-filled {
    border: 1px solid currentColor;
}

.twin-layers[b-053usy9ueq]  .twin-layer.mud-chip-outlined {
    border-color: var(--inf-border-control);
    color: var(--inf-text-2);
}

.twin-layers[b-053usy9ueq]  .twin-layer.mud-chip-outlined .mud-chip-icon {
    color: inherit;
}

.twin-layers[b-053usy9ueq]  .twin-layer-check {
    font-size: 1rem;
    margin: 0 -4px 0 4px;
}

.twin-actions[b-053usy9ueq] {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

/* Touch targets ≥ 40 px (§5.8) without the large icon-button padding. */
.twin-actions[b-053usy9ueq]  .mud-icon-button {
    width: 40px;
    height: 40px;
    color: var(--inf-text-2);
}

.twin-actions[b-053usy9ueq]  .mud-icon-button:hover {
    color: var(--inf-primary);
    background: var(--inf-primary-tint);
}

.twin-main[b-053usy9ueq] {
    display: flex;
    gap: 0;
    align-items: stretch;
    min-width: 0;
}

.twin-map[b-053usy9ueq] {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    height: calc(100vh - 280px);
    min-height: 440px;
    margin: 12px;
    border-radius: var(--inf-radius);
    overflow: hidden;
    border: 1px solid var(--inf-divider);
    background: #dfe3da; /* data colour: the canvas BACKGROUND of twin-viewer.js */
}

.twin-map[b-053usy9ueq]  .twin-canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
    outline: none;
}

.twin-map[b-053usy9ueq]  .twin-canvas:focus-visible {
    box-shadow: inset 0 0 0 3px var(--inf-focus);
}

.twin-map[b-053usy9ueq]  .twin-canvas:active {
    cursor: grabbing;
}

.twin-map[b-053usy9ueq]  .twin-tooltip {
    position: absolute;
    left: 0;
    top: 0;
    max-width: 320px;
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(23, 43, 58, 0.94);
    color: #fff;
    font-size: 0.75rem;
    line-height: 1.4;
    pointer-events: none;
    box-shadow: var(--inf-shadow-overlay);
    z-index: 2;
}

.twin-map[b-053usy9ueq]  .twin-readout {
    position: absolute;
    right: 8px;
    bottom: 8px;
    max-width: calc(100% - 16px);
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--inf-text);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    box-shadow: 0 0 0 1px var(--inf-divider);
}

.twin-map[b-053usy9ueq]  .twin-readout:empty {
    display: none;
}

.twin-map[b-053usy9ueq]  .twin-basemap select {
    font-family: inherit;
    color: var(--inf-text);
    min-height: 32px;
}

/* The side panel takes a quarter of the window between 320 and 400 px, so the map stays the wider half at 1024 px
   (drawer beside the page) and keeps the old proportions up to 1440 px; below 960 px it stacks under the map. */
.twin-side[b-053usy9ueq] {
    flex: 0 0 clamp(320px, 25vw, 400px);
    width: clamp(320px, 25vw, 400px);
    min-width: 0;
    max-height: calc(100vh - 280px + 24px);
    min-height: 440px;
    overflow-y: auto;
    border-left: 1px solid var(--inf-divider);
    padding: 0 16px 16px;
}

.twin-side[b-053usy9ueq]  .mud-tabs-tabbar {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--inf-surface);
}

.twin-legend[b-053usy9ueq]  .twin-legend-group {
    display: block;
    margin: 14px 0 4px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--inf-text-2);
}

.twin-legend-row[b-053usy9ueq] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 30px;
    padding: 3px 0;
    font-size: 0.8125rem;
    border-bottom: 1px solid var(--inf-divider-soft);
}

.twin-legend-row canvas[b-053usy9ueq] {
    flex: 0 0 auto;
    border-radius: 4px;
}

.twin-legend-code[b-053usy9ueq] {
    flex: 0 0 auto;
    min-width: 44px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.twin-legend-name[b-053usy9ueq] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.twin-legend-count[b-053usy9ueq] {
    flex: 0 0 auto;
    min-width: 24px;
    text-align: right;
    color: var(--inf-text-2);
    font-variant-numeric: tabular-nums;
}

.twin-legend-line[b-053usy9ueq] {
    display: inline-block;
    flex: 0 0 auto;
    width: 56px;
    height: 0;
    border-top: 3px solid #1e88e5; /* data colour: the trajectory */
}

.twin-legend-axis[b-053usy9ueq] {
    border-top: 2px dashed #ff6f00; /* data colour: the СКДФ axis */
}

.twin-side[b-053usy9ueq]  .twin-attribution-link {
    display: inline-block;
    margin-top: 8px;
}

.twin-side[b-053usy9ueq]  .twin-facts-divider {
    margin: 14px 0;
}

@media (max-width: 960px) {
    .twin-main[b-053usy9ueq] {
        flex-direction: column;
    }

    .twin-map[b-053usy9ueq] {
        height: 62vh;
        min-height: 340px;
        margin: 12px 12px 0;
    }

    .twin-side[b-053usy9ueq] {
        flex: 1 1 auto;
        width: 100%;
        max-height: none;
        min-height: 0;
        border-left: 0;
        padding: 0 12px 12px;
    }
}

/* «Требует проверки» (track A F3): the legend line doubles as the filter toggle; magenta like the map's review look
   (a data colour). */
.twin-legend-review[b-053usy9ueq] {
    display: flex;
    width: 100%;
    margin: 10px 0 4px;
    padding: 8px 10px;
    border: 1px dashed #d81b60;
    border-radius: var(--inf-radius);
    background: rgba(216, 27, 96, 0.06);
    color: inherit;
    font: inherit;
    font-size: 0.8125rem;
    text-align: left;
    cursor: pointer;
}

.twin-legend-review:hover[b-053usy9ueq] {
    background: rgba(216, 27, 96, 0.1);
}

.twin-legend-review:focus-visible[b-053usy9ueq] {
    outline: 3px solid var(--inf-focus);
    outline-offset: 2px;
}

.twin-legend-review.is-on[b-053usy9ueq] {
    border-style: solid;
    background: rgba(216, 27, 96, 0.14);
}

.twin-legend-review .twin-legend-name[b-053usy9ueq] {
    white-space: normal;
    font-weight: 600;
}

.twin-legend-review small[b-053usy9ueq] {
    font-weight: 400;
    color: var(--inf-text-2);
}

.twin-review-badge[b-053usy9ueq] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #d81b60;
    color: #fff;
    font-weight: 700;
    font-size: 0.8125rem;
}

.twin-legend-reviewcount[b-053usy9ueq] {
    flex: 0 0 auto;
    color: #ad1457;
    font-size: 0.75rem;
    font-weight: 700;
}

/* Track TP re-check R1: the «Покрытие: оценка» legend line (lighter, hatched swatch) wraps its hint. */
.twin-legend-estimated .twin-legend-name[b-053usy9ueq] {
    white-space: normal;
}

.twin-legend-estimated small[b-053usy9ueq] {
    color: var(--inf-text-2);
}

/* DESIGN-improve-20261015.md §3 T: the «СКДФ» legend rows (comparison accent glyphs on canvas swatches) wrap their
   counts line; a sub-layer switched off in the menu stays listed, dimmed. */
.twin-legend-skdf .twin-legend-name[b-053usy9ueq] {
    white-space: normal;
}

.twin-legend-skdf .twin-legend-name small[b-053usy9ueq] {
    color: var(--inf-text-2);
}

.twin-legend-skdf.is-off[b-053usy9ueq] {
    opacity: 0.5;
}

.twin-legend-skdf-note[b-053usy9ueq] {
    margin-top: 8px;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--inf-text-2);
}

.twin-layers[b-053usy9ueq]  .twin-layer--skdf.mud-chip-filled {
    border: 1px solid currentColor;
}
/* /Components/Pages/Verification/ColorSwatch.razor.rz.scp.css */
.cs[b-amp7017yzl] {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 2px;
    margin-right: 6px;
    vertical-align: -1px;
    background: var(--cs-color);
    flex: none;
}

.cs-dashed[b-amp7017yzl] {
    background: transparent;
    border: 2px dashed var(--cs-color);
    box-sizing: border-box;
}
/* /Components/Pages/Verification/ComparisonPanel.razor.rz.scp.css */
/* DESIGN-ui-theme.md §5 — «Сравнение»: panels with the analytics accent (requirements §11.2: comparison, never
   severity); the run toggles are pills, a chosen one teal-tinted with its count. */

.cp-root[b-aehw1i7qu0]  .cp-panel {
    margin-bottom: 16px;
}

.cp-runs[b-aehw1i7qu0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.cp-options[b-aehw1i7qu0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-top: 14px;
}

.cp-run[b-aehw1i7qu0] {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 36px;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid var(--inf-border-control);
    background: var(--inf-surface);
    color: var(--inf-text-2);
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
}

.cp-run:hover[b-aehw1i7qu0] {
    border-color: var(--inf-primary);
}

.cp-run:focus-visible[b-aehw1i7qu0] {
    outline: 2px solid var(--inf-focus);
    outline-offset: 1px;
}

.cp-run-on[b-aehw1i7qu0] {
    color: var(--inf-primary-emphasis);
    font-weight: 600;
    border-color: var(--inf-primary);
    background: var(--inf-primary-tint);
}

.cp-run-count[b-aehw1i7qu0] {
    margin-left: 6px;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--inf-text-2);
}

.cp-scroll[b-aehw1i7qu0] {
    overflow-x: auto;
    border: 1px solid var(--inf-divider);
    border-radius: var(--inf-radius);
}

.cp-filters[b-aehw1i7qu0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 12px;
}

.cp-preview[b-aehw1i7qu0] {
    padding: 14px 16px 16px;
}

.cp-preview-head[b-aehw1i7qu0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.cp-preview-head[b-aehw1i7qu0]  .cp-preview-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 1.0625rem;
}

.cp-preview-empty[b-aehw1i7qu0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 8px;
    text-align: center;
    color: var(--inf-text-2);
}

/* The th/td are this component's own markup (inside MudSimpleTable), so they carry the scope attribute. */
.cp-scroll th[b-aehw1i7qu0],
.cp-scroll td[b-aehw1i7qu0] {
    white-space: nowrap;
}

.cp-num[b-aehw1i7qu0] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cp-head[b-aehw1i7qu0] {
    display: inline-block;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

.cp-linkish[b-aehw1i7qu0] {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    color: var(--inf-primary);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

.cp-linkish:hover[b-aehw1i7qu0] {
    color: var(--inf-primary-emphasis);
}

.cp-linkish:focus-visible[b-aehw1i7qu0] {
    outline: 2px solid var(--inf-focus);
    outline-offset: 1px;
}

.cp-frames[b-aehw1i7qu0] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cp-family[b-aehw1i7qu0] {
    display: block;
    font-size: 0.6875rem;
}

.cp-dots[b-aehw1i7qu0],
.cp-legend[b-aehw1i7qu0] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cp-legend[b-aehw1i7qu0] {
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--inf-text-2);
}

.cp-legend > span[b-aehw1i7qu0] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cp-dot[b-aehw1i7qu0] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--cp-color, var(--inf-text-2));
    opacity: 0.35;
    flex: none;
}

.cp-on[b-aehw1i7qu0] {
    background: var(--cp-color, var(--inf-text-2));
    opacity: 1;
}

.cp-ref[b-aehw1i7qu0] {
    --cp-color: var(--inf-text);
    border-radius: 2px;
}

/* §12: every detection of the run in this cluster is marked wrong — a hollow dot struck through in red. */
.cp-wrong[b-aehw1i7qu0] {
    position: relative;
    background: transparent;
    border-style: dashed;
}

.cp-wrong[b-aehw1i7qu0]::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -3px;
    width: 2px;
    height: 14px;
    margin-left: -1px;
    background: var(--inf-error);
    transform: rotate(45deg);
}

.cp-wrong-note[b-aehw1i7qu0] {
    color: var(--inf-error);
}

/* §3 K: every detection of the run in this cluster is marked «Верно» — a filled dot ringed in the success colour. */
.cp-correct[b-aehw1i7qu0] {
    box-shadow: 0 0 0 2px var(--inf-surface), 0 0 0 4px var(--inf-success);
}

.cp-correct-note[b-aehw1i7qu0] {
    color: var(--inf-success);
}

.cp-reviewed-chip[b-aehw1i7qu0] {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--inf-success-bg);
    color: var(--inf-success);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.5;
    vertical-align: middle;
}

.cp-legend .cp-reviewed-chip[b-aehw1i7qu0] {
    margin: 0 2px 0 0;
}

.cp-detail-run[b-aehw1i7qu0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 8px;
    padding: 4px 0;
    border-bottom: 1px solid var(--inf-divider-soft);
}

.cp-verdict-actions[b-aehw1i7qu0] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

.cp-ref-sep[b-aehw1i7qu0] {
    width: 1px;
    height: 12px;
    background: var(--inf-divider);
    margin: 0 2px;
}

.cp-sticky[b-aehw1i7qu0] {
    position: sticky;
    top: 72px;
}

.cp-detail[b-aehw1i7qu0] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 8px;
    font-size: 0.8125rem;
}

@media (max-width: 959.98px) {
    .cp-sticky[b-aehw1i7qu0] {
        position: static;
    }
}

.cp-root[b-aehw1i7qu0] {
    min-width: 0;
}

/* §3 K: the reviewed-frames numbers as cards on phones (the table scrolls sideways there and hides them). */
.cp-reviewed-cards[b-aehw1i7qu0] {
    display: none;
    flex-direction: column;
    gap: 8px;
}

.cp-reviewed-card[b-aehw1i7qu0] {
    border: 1px solid var(--inf-divider);
    border-radius: var(--inf-radius);
    padding: 8px 12px;
    font-size: 0.8125rem;
}

.cp-reviewed-card-name[b-aehw1i7qu0] {
    font-weight: 600;
    margin-bottom: 4px;
}

.cp-reviewed-card-numbers[b-aehw1i7qu0] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 599.98px) {
    .cp-reviewed-table[b-aehw1i7qu0] {
        display: none;
    }

    .cp-reviewed-cards[b-aehw1i7qu0] {
        display: flex;
    }
}
/* /Components/Pages/Verification/FramePreview.razor.rz.scp.css */
.fp-root[b-uh3kbyj07f] {
    min-width: 0;
}

.fp-frame[b-uh3kbyj07f] {
    position: relative;
    width: 100%;
    background: #000;
    border-radius: 4px;
    overflow: hidden;
    line-height: 0;
    min-height: 120px;
}

.fp-img[b-uh3kbyj07f] {
    display: block;
    width: 100%;
    height: auto;
}

.fp-rotated[b-uh3kbyj07f] {
    transform: rotate(180deg);
}

.fp-box[b-uh3kbyj07f] {
    position: absolute;
    border: 2px solid var(--fp-color);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
    pointer-events: auto;
}

.fp-ann[b-uh3kbyj07f] {
    border-style: dashed;
}

.fp-label[b-uh3kbyj07f] {
    position: absolute;
    left: -2px;
    bottom: 100%;
    max-width: 220px;
    padding: 1px 4px;
    font-size: 0.6875rem;
    line-height: 1.3;
    color: #fff;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fp-label-right[b-uh3kbyj07f] {
    left: auto;
    right: -2px;
}
/* /Components/Pages/Verification/RecordingRunsPanel.razor.rz.scp.css */
/* DESIGN-ui-theme.md §5 — the dataset page's side column: «Прогоны» (launch / import on top, one row per run with
   its visibility checkbox, colour, progress and metrics) and «Эталонная разметка» (click a mark to seek). */

.rrp-root[b-tyhqd02vy7]  .rrp-panel {
    margin-bottom: 16px;
}

.rrp-launch[b-tyhqd02vy7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.rrp-list[b-tyhqd02vy7] {
    display: flex;
    flex-direction: column;
    margin: 0 -16px;
}

.rrp-run[b-tyhqd02vy7] {
    display: flex;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 16px 8px 12px;
    border-top: 1px solid var(--inf-divider-soft);
}

/* A run (or the reference lane) hidden from the timeline: the old build faded the whole body with opacity, which
   dropped the status chip, the frame count and the meta line to ~2.5:1. Instead the row sits on the canvas tint,
   the name turns secondary and only the decorative colour square fades — every text keeps >= 4.5:1
   (--inf-text-2 on --inf-bg is 5.6:1) and the unchecked box stays the carrier of the state. */
.rrp-hidden[b-tyhqd02vy7] {
    background: var(--inf-bg);
}

.rrp-hidden .rrp-name[b-tyhqd02vy7] {
    color: var(--inf-text-2);
    font-weight: 500;
}

.rrp-hidden[b-tyhqd02vy7]  .cs {
    opacity: 0.45;
}

.rrp-run[b-tyhqd02vy7]  .rrp-check {
    margin: -4px 0 0 -8px;
    flex: none;
}

.rrp-body[b-tyhqd02vy7] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}

.rrp-title[b-tyhqd02vy7] {
    display: flex;
    align-items: center;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 600;
}

.rrp-name[b-tyhqd02vy7] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}

.rrp-title[b-tyhqd02vy7]  .rrp-action {
    margin: -6px -4px -6px 0;
}

.rrp-meta[b-tyhqd02vy7] {
    font-size: 0.75rem;
    color: var(--inf-text-2);
    font-variant-numeric: tabular-nums;
}

.rrp-error[b-tyhqd02vy7] {
    color: var(--inf-error);
}

.rrp-annotations[b-tyhqd02vy7] {
    display: flex;
    flex-direction: column;
    max-height: 420px;
    overflow-y: auto;
    margin: 0 -16px -16px;
}

.rrp-annotation[b-tyhqd02vy7] {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    padding: 8px 16px;
    cursor: pointer;
    border-top: 1px solid var(--inf-divider-soft);
    font-size: 0.8125rem;
}

.rrp-annotation:hover[b-tyhqd02vy7],
.rrp-annotation:focus-visible[b-tyhqd02vy7] {
    background: var(--inf-hover);
    outline: none;
}

.rrp-annotation:focus-visible[b-tyhqd02vy7] {
    box-shadow: inset 0 0 0 2px var(--inf-focus);
}

.rrp-current[b-tyhqd02vy7] {
    background: var(--inf-primary-tint);
    box-shadow: inset 3px 0 0 var(--inf-primary);
}

.rrp-annotation-body[b-tyhqd02vy7] {
    flex: 1 1 auto;
    min-width: 0;
}

.rrp-annotation-actions[b-tyhqd02vy7] {
    display: flex;
    flex: none;
    margin: -4px -8px 0 0;
}

.rrp-note[b-tyhqd02vy7] {
    color: var(--inf-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rrp-annotation[b-tyhqd02vy7]  .rrp-accepted {
    vertical-align: -3px;
    color: var(--inf-success);
}
/* /Components/Pages/Verification/RecordingVideoPanel.razor.rz.scp.css */
/* DESIGN-ui-theme.md §5 — «Видео и таймлайн» of /recordings/{id}: the run toggles and the way into «Проверка ИИ»
   on one wrapping row, then the player on a white panel beside «Области на кадре». */

.rvp-bar[b-f3i3f0izxh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.rvp-player[b-f3i3f0izxh] {
    padding: 12px;
}

@media (max-width: 599.98px) {
    .rvp-player[b-f3i3f0izxh] {
        padding: 8px;
    }
}
/* /Components/Pages/Verification/ReviewSpansPanel.razor.rz.scp.css */
/* DESIGN-improve-20261015.md §3 K «Просмотренные кадры» (DESIGN-ui-theme.md §5 side-column panel): the share reviewed,
   the add controls (typed range, up to the current frame, the whole recording) and one row per span. */

.rsp-root[b-knkvwwvwm3]  .rsp-panel {
    margin-bottom: 16px;
}

.rsp-summary[b-knkvwwvwm3] {
    font-size: 0.875rem;
    margin-bottom: 4px;
    font-variant-numeric: tabular-nums;
}

.rsp-add[b-knkvwwvwm3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.rsp-fields[b-knkvwwvwm3] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.rsp-buttons[b-knkvwwvwm3] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rsp-list[b-knkvwwvwm3] {
    display: flex;
    flex-direction: column;
    margin: 0 -16px;
}

.rsp-row[b-knkvwwvwm3] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 16px;
    border-top: 1px solid var(--inf-divider-soft);
    font-size: 0.8125rem;
}

.rsp-text[b-knkvwwvwm3] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.rsp-range[b-knkvwwvwm3] {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--inf-primary);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}

.rsp-range:hover[b-knkvwwvwm3] {
    color: var(--inf-primary-emphasis);
    text-decoration: underline;
}

.rsp-range:focus-visible[b-knkvwwvwm3] {
    outline: 2px solid var(--inf-focus);
    outline-offset: 1px;
}

.rsp-meta[b-knkvwwvwm3] {
    color: var(--inf-text-2);
    font-size: 0.75rem;
}

.rsp-row[b-knkvwwvwm3]  .rsp-delete {
    flex: none;
    margin: -6px -4px -6px 0;
}
/* /Components/Pages/Verification/RunProgress.razor.rz.scp.css */
.rp-root[b-w8kcramhfp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    min-width: 0;
}

.rp-bar[b-w8kcramhfp] {
    flex: 1 1 90px;
    min-width: 70px;
    max-width: 180px;
}

.rp-text[b-w8kcramhfp] {
    font-size: 0.75rem;
    color: var(--inf-text-2);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.rp-message[b-w8kcramhfp],
.rp-error[b-w8kcramhfp] {
    flex-basis: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
}

.rp-error[b-w8kcramhfp] {
    color: var(--inf-error);
}
/* /Components/Pages/Verification/StartRunDialog.razor.rz.scp.css */
/* DESIGN-ui-theme.md §5 — «Запуск конфигурации»: what the chosen configuration will do, as a bordered key/value list. */

.sr-facts[b-p598f6n34n] {
    margin-top: 16px;
    border: 1px solid var(--inf-divider);
    border-radius: var(--inf-radius);
    overflow: hidden;
}

.sr-facts td:first-child[b-p598f6n34n] {
    width: 38%;
    color: var(--inf-text-2);
    vertical-align: top;
}

.sr-facts tr:last-child td[b-p598f6n34n] {
    border-bottom: 0;
}
/* /Components/Pages/Verification/Verification.razor.rz.scp.css */
/* DESIGN-ui-theme.md §5 — «Проверка ИИ» (mockup adm-07): page tabs on the canvas; each tab brings its own panels. */

.vf-tabs[b-bwhwsbjnpp]  .mud-tabs-tabbar {
    background: transparent;
    border-radius: 0;
}

.vf-tabs[b-bwhwsbjnpp]  .mud-tab {
    min-height: 48px;
    color: var(--inf-text-2);
}

.vf-tabs[b-bwhwsbjnpp]  .mud-tab.mud-tab-active {
    color: var(--inf-primary);
}

.vf-tabs[b-bwhwsbjnpp]  .vf-tab-panels {
    padding-top: 16px;
}
/* /Components/Pages/Verification/VerificationConfigs.razor.rz.scp.css */
/* DESIGN-ui-theme.md §5 — «Конфигурации» tab: one flush panel, «Новая конфигурация» and «Показывать архивные» in
   its header. */

.vcf-empty[b-zerk8pfy95] {
    padding: 0 16px 16px;
}

.vcf-name[b-zerk8pfy95] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.vcf-name[b-zerk8pfy95]  .cs {
    margin: 5px 0 0;
}

.vcf-root[b-zerk8pfy95]  .inf-panel__actions .mud-switch {
    margin: 0;
}
/* /Components/Pages/Verification/VerificationDatasets.razor.rz.scp.css */
/* DESIGN-ui-theme.md §5 — «Наборы данных» tab: KPI tiles, then the list in a flush panel whose header carries the
   count and the search. */

.vd-root[b-ghj3k9dyr7]  .vd-count {
    white-space: nowrap;
}

.vd-search[b-ghj3k9dyr7] {
    width: 320px;
    max-width: 100%;
}

.vd-empty[b-ghj3k9dyr7] {
    padding: 0 16px 16px;
}

.vd-root[b-ghj3k9dyr7]  .vd-nowrap {
    white-space: nowrap;
}

.vd-name[b-ghj3k9dyr7] {
    white-space: nowrap;
}

/* Four tiles: let them share the row instead of leaving a fifth empty track. */
.vd-kpi[b-ghj3k9dyr7] {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

@media (max-width: 599.98px) {
    .vd-search[b-ghj3k9dyr7] {
        width: 100%;
    }

    .vd-kpi[b-ghj3k9dyr7] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vd-name[b-ghj3k9dyr7] {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}
/* /Components/Pages/Verification/VerificationRecording.razor.rz.scp.css */
/* DESIGN-ui-theme.md §5 — one dataset of «Проверка ИИ»: header with the way back, page tabs on the canvas, the
   player on a white panel beside the regions list and the runs panel. */

.vrec-tabs[b-w4snu0tb21]  .mud-tabs-tabbar {
    background: transparent;
    border-radius: 0;
}

.vrec-tabs[b-w4snu0tb21]  .mud-tab {
    min-height: 48px;
    color: var(--inf-text-2);
}

.vrec-tabs[b-w4snu0tb21]  .mud-tab.mud-tab-active {
    color: var(--inf-primary);
}

.vrec-tabs[b-w4snu0tb21]  .vrec-tab-panels {
    padding-top: 16px;
}

.vrec-player[b-w4snu0tb21] {
    padding: 12px;
}

@media (max-width: 599.98px) {
    .vrec-player[b-w4snu0tb21] {
        padding: 8px;
    }
}
/* /Components/Pages/Verification/VerificationRuns.razor.rz.scp.css */
/* DESIGN-ui-theme.md §5 — «Прогоны» tab: the filters in their own panel (selects, then the live/refresh pair at the
   end), the runs in a flush panel with the server's total in its header and the pager under the table. */

.vr-filters[b-9mw0fkjqcj] {
    padding: 12px 16px;
    margin-bottom: 16px;
}

/* MudSelect's own wrapper (div.mud-select) is the flex item; its Class lands on the inner input control. */
.vr-filters[b-9mw0fkjqcj]  .inf-filter-bar > .mud-select {
    flex: 0 1 280px;
    min-width: 200px;
}

.vr-refresh[b-9mw0fkjqcj] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vr-root[b-9mw0fkjqcj]  .vr-live {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.vr-root[b-9mw0fkjqcj]  .vr-count {
    white-space: nowrap;
}

.vr-empty[b-9mw0fkjqcj] {
    padding: 0 16px 16px;
}

.vr-config[b-9mw0fkjqcj] {
    display: flex;
    align-items: flex-start;
    min-width: 0;
}

.vr-config[b-9mw0fkjqcj]  .cs {
    margin-top: 5px;
}

.vr-config-text[b-9mw0fkjqcj] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

.vr-dataset[b-9mw0fkjqcj] {
    white-space: nowrap;
}

@media (max-width: 959.98px) {
    .vr-dataset[b-9mw0fkjqcj] {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

.vr-pager[b-9mw0fkjqcj] {
    display: flex;
    justify-content: center;
    padding: 12px 16px;
    border-top: 1px solid var(--inf-divider-soft);
}

@media (max-width: 599.98px) {
    .vr-filters[b-9mw0fkjqcj]  .inf-filter-bar > .mud-select {
        flex: 1 1 100%;
    }
}
/* /Components/Pages/Verification/VisionConfigDialog.razor.rz.scp.css */
.vc-colors[b-2y3ceqqd4r] {
    min-width: 0;
}

.vc-swatches[b-2y3ceqqd4r] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

.vc-swatch[b-2y3ceqqd4r],
.vc-auto[b-2y3ceqqd4r] {
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 2px solid transparent;
    padding: 0;
    cursor: pointer;
}

.vc-auto[b-2y3ceqqd4r] {
    width: auto;
    padding: 0 8px;
    font: inherit;
    font-size: 0.75rem;
    color: var(--inf-text);
    background: transparent;
    border-color: var(--inf-border-control);
}

.vc-on[b-2y3ceqqd4r] {
    border-color: var(--inf-text);
    box-shadow: 0 0 0 1px var(--inf-surface) inset;
}

.vc-custom[b-2y3ceqqd4r] {
    width: 26px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.vc-swatch:focus-visible[b-2y3ceqqd4r],
.vc-auto:focus-visible[b-2y3ceqqd4r],
.vc-custom:focus-visible[b-2y3ceqqd4r] {
    outline: 2px solid var(--inf-focus);
    outline-offset: 1px;
}

/* «Модель и конвейер» / «Какие кадры»: section captions of the long form. */
.vc-body[b-2y3ceqqd4r]  .vc-section {
    display: block;
    padding-top: 8px;
    border-top: 1px solid var(--inf-divider);
    color: var(--inf-text);
}

.vc-estimate[b-2y3ceqqd4r] {
    display: flex;
    padding: 10px 12px;
    border-radius: var(--inf-radius);
    background: var(--inf-surface-muted);
    border: 1px solid var(--inf-divider);
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

.vc-estimate[b-2y3ceqqd4r]  .vc-estimate-value {
    font-variant-numeric: tabular-nums;
}

.vc-body[b-2y3ceqqd4r] {
    max-height: min(70vh, 900px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 4px 0 0;
}
/* /Components/Shared/DetectionImage.razor.rz.scp.css */
/* The thumbnail button of DetectionImage: the same block it always was, plus rounded corners and a visible focus. */
.di-open[b-qzu53srte1] {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--inf-radius, 8px);
    background: transparent;
    cursor: zoom-in;
    overflow: hidden;
}

.di-open:focus-visible[b-qzu53srte1] {
    outline: 3px solid var(--inf-focus);
    outline-offset: 2px;
}

.di-open:hover[b-qzu53srte1] {
    filter: brightness(0.96);
}
/* /Components/Shared/Facets/FacetSelect.razor.rz.scp.css */
/* DESIGN-review-and-verification.md §6 facet, drawn as the reference screens' filter dropdown (DESIGN-ui-theme.md
   §4.5): a white 40 px box with an 8 px radius, the label in body text, the chevron on the right. */
.fs-root[b-61qzw2bm94] {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.fs-trigger[b-61qzw2bm94] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-height: 40px;
    padding: 4px 8px 4px 14px;
    border: 1px solid var(--inf-border-control, var(--mud-palette-lines-inputs));
    border-radius: 8px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
    white-space: nowrap;
}

.fs-trigger:hover[b-61qzw2bm94] {
    border-color: var(--mud-palette-lines-inputs);
}

.fs-trigger:focus-visible[b-61qzw2bm94] {
    outline: 3px solid var(--inf-focus, var(--mud-palette-primary));
    outline-offset: 2px;
}

.fs-trigger-active[b-61qzw2bm94] {
    border-color: var(--mud-palette-primary);
    background: var(--inf-primary-tint, var(--mud-palette-primary-hover));
}

.fs-trigger-label[b-61qzw2bm94] {
    color: var(--mud-palette-text-primary);
    font-weight: 500;
}

.fs-trigger-active .fs-trigger-label[b-61qzw2bm94] {
    color: var(--mud-palette-text-secondary);
    font-weight: 400;
}

.fs-trigger[b-61qzw2bm94]  .fs-trigger-icon {
    color: var(--mud-palette-text-secondary);
}

.fs-trigger-active .fs-trigger-label[b-61qzw2bm94]::after {
    content: ":";
}

.fs-trigger-value[b-61qzw2bm94] {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 16em;
    font-weight: 600;
    color: var(--inf-primary-emphasis, var(--mud-palette-primary));
}

.fs-trigger-more[b-61qzw2bm94] {
    padding: 0 6px;
    border-radius: 10px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-size: 0.75rem;
    line-height: 18px;
}

.fs-panel[b-61qzw2bm94] {
    display: flex;
    flex-direction: column;
    width: 420px;
    max-width: calc(100vw - 32px);
    max-height: min(460px, 70vh);
}

.fs-search[b-61qzw2bm94] {
    margin: 8px 8px 4px;
    padding: 8px 10px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.875rem;
}

.fs-search:focus[b-61qzw2bm94] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

.fs-toolbar[b-61qzw2bm94] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 12px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.fs-link[b-61qzw2bm94] {
    border: 0;
    background: none;
    padding: 2px 4px;
    color: var(--mud-palette-primary);
    font: inherit;
    cursor: pointer;
}

.fs-list[b-61qzw2bm94] {
    overflow-y: auto;
    padding: 4px 0;
}

.fs-group[b-61qzw2bm94] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 6px 12px 2px;
    border: 0;
    background: none;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    cursor: pointer;
}

.fs-group-static[b-61qzw2bm94] {
    cursor: default;
}

.fs-option[b-61qzw2bm94] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
}

.fs-option:hover[b-61qzw2bm94] {
    background: var(--inf-hover, var(--mud-palette-action-default-hover));
}

.fs-option input[b-61qzw2bm94] {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--mud-palette-primary);
    cursor: pointer;
}

.fs-option-label[b-61qzw2bm94] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fs-count[b-61qzw2bm94] {
    flex: none;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
}

/* §6: an option that would add nothing is shown grey, but stays in place and stays clickable. */
.fs-zero[b-61qzw2bm94] {
    color: var(--mud-palette-text-disabled);
}

.fs-zero .fs-count[b-61qzw2bm94] {
    color: var(--mud-palette-text-disabled);
}

.fs-selected .fs-option-label[b-61qzw2bm94] {
    font-weight: 500;
}

.fs-empty[b-61qzw2bm94],
.fs-more[b-61qzw2bm94] {
    padding: 8px 12px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.fs-more[b-61qzw2bm94] {
    border-top: 1px solid var(--mud-palette-lines-default);
}
/* /Components/Shared/Facets/ListPager.razor.rz.scp.css */
.lp-root[b-mbr0ukc6d6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 16px;
    padding: 8px 12px;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.lp-size[b-mbr0ukc6d6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.lp-select[b-mbr0ukc6d6] {
    height: 32px;
    padding: 2px 6px;
    border: 1px solid var(--inf-border-control, var(--mud-palette-lines-inputs));
    border-radius: 6px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
}

.lp-range[b-mbr0ukc6d6] {
    font-variant-numeric: tabular-nums;
}
/* /Components/Shared/Facets/ListRowLink.razor.rz.scp.css */
.lrl[b-utxifympui] {
    display: block;
    color: inherit;
    text-decoration: none;
}

/* The stretched hit area: the pseudo-element belongs to the anchor, so every pointer action on the
   cell — including its padding — is an action on the link. */
.lrl[b-utxifympui]::after {
    content: "";
    position: absolute;
    inset: 0;
}

.lrl:focus-visible[b-utxifympui] {
    outline: none;
}

.lrl:focus-visible[b-utxifympui]::after {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.lrl[b-utxifympui]  .lrl-above {
    position: relative;
    z-index: 1;
}
/* /Components/Shared/Facets/SortLabel.razor.rz.scp.css */
.sl-button[b-zblmhxtpvm] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    cursor: pointer;
}

.sl-button[b-zblmhxtpvm]  .sl-icon {
    opacity: 0;
    transition: opacity 0.15s;
}

.sl-button:hover[b-zblmhxtpvm]  .sl-icon,
.sl-active[b-zblmhxtpvm]  .sl-icon {
    opacity: 1;
}

.sl-active[b-zblmhxtpvm] {
    color: var(--mud-palette-primary);
}

.sl-button:focus-visible[b-zblmhxtpvm] {
    outline: 3px solid var(--inf-focus, var(--mud-palette-primary));
    outline-offset: 2px;
}
/* /Components/Shared/MobileAppCard.razor.rz.scp.css */
/* The dashboard's mobile-app tile (DESIGN-ui-theme.md): the .inf-kpi frame from infodor.css with a version line and
   the download actions in place of the figure. */

.ivi-app-tile__text[b-g50q2ehdwv] {
    flex: 1 1 auto;
}

.ivi-app-tile__version[b-g50q2ehdwv] {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--inf-text);
    overflow-wrap: anywhere;
}

.ivi-app-tile__actions[b-g50q2ehdwv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
}

/* The version line and the actions sit side by side when the tile is wide enough (Home.razor gives it the rest of
   the KPI grid's last row) and wrap under each other when it is not. */
.ivi-app-tile__body[b-g50q2ehdwv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
}
/* /Components/Shared/NotificationBell.razor.rz.scp.css */
/* The app-bar bell's dropdown in the ИНФОДОР style (DESIGN-ui-theme.md): a 360 px card with a header, the latest
   rows with their category icon (same tones as /notifications) and an unread dot, and «Все уведомления» at the
   foot. The popover itself is skinned by infodor.css. */

/* The app-bar activator. MudBadge's overlap offset (bottom-left corner 12 px in from the top-right corner) is made
   for a 24 px icon; on the 48 px icon button it hangs the badge 8 px above and 8 px right of the button — over the
   RU/EN button (toolbar gap 4 px on phones, 8 px on desktop) and off the top of the 56 px phone app bar. Put the
   corner 22 px in instead: a one-digit badge then sits 2 px inside the button's top and right edges, on the bell's
   shoulder. A wider badge keeps growing to the right (over the button padding, not over the bell), and the
   --mid / --wide modifiers (set from the unread count) reserve the extra width it takes past the button. */
.ivi-bell__activator[b-rqf1t0u5gr] {
    display: inline-flex;
    align-items: center;
}

.ivi-bell__activator[b-rqf1t0u5gr]  .mud-badge.mud-badge-top.right.mud-badge-overlap {
    inset: auto auto calc(100% - 22px) calc(100% - 22px);
}

/* «12»: ~24 px wide → ends ~2 px past the button. «99+»: ~35 px → ~13 px past. */
.ivi-bell__activator--mid[b-rqf1t0u5gr] {
    margin-right: 4px;
}

.ivi-bell__activator--wide[b-rqf1t0u5gr] {
    margin-right: 14px;
}

.ivi-bell[b-rqf1t0u5gr] {
    width: 360px;
    max-width: calc(100vw - 24px);
}

.ivi-bell__head[b-rqf1t0u5gr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px 10px;
}

.ivi-bell[b-rqf1t0u5gr]  .ivi-bell__title.mud-typography {
    font-size: 0.9375rem;
    font-weight: 700;
}

.ivi-bell__count[b-rqf1t0u5gr] {
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--inf-error-bg);
    color: var(--inf-error);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.ivi-bell__empty[b-rqf1t0u5gr] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    color: var(--inf-text-2);
}

.ivi-bell__list[b-rqf1t0u5gr] {
    max-height: min(60vh, 440px);
    overflow-y: auto;
    padding: 4px 0;
}

.ivi-bell[b-rqf1t0u5gr]  .ivi-bell__item.mud-menu-item {
    padding-top: 8px;
    padding-bottom: 8px;
}

.ivi-bell__row[b-rqf1t0u5gr] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    width: 100%;
}

.ivi-bell__icon[b-rqf1t0u5gr] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.ivi-bell__icon--primary[b-rqf1t0u5gr] { background: var(--inf-primary-tint); color: var(--inf-primary); }
.ivi-bell__icon--info[b-rqf1t0u5gr] { background: var(--inf-info-bg); color: var(--inf-info); }
.ivi-bell__icon--success[b-rqf1t0u5gr] { background: var(--inf-success-bg); color: var(--inf-success); }
.ivi-bell__icon--warning[b-rqf1t0u5gr] { background: var(--inf-warning-bg); color: var(--inf-warning); }
.ivi-bell__icon--error[b-rqf1t0u5gr] { background: var(--inf-error-bg); color: var(--inf-error); }
.ivi-bell__icon--neutral[b-rqf1t0u5gr] { background: var(--inf-neutral-bg); color: var(--inf-neutral); }
.ivi-bell__icon--accent[b-rqf1t0u5gr] { background: var(--inf-accent-bg); color: var(--inf-accent); }

.ivi-bell__text[b-rqf1t0u5gr] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.ivi-bell[b-rqf1t0u5gr]  .ivi-bell__name.mud-typography {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

.ivi-bell__dot[b-rqf1t0u5gr] {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--inf-error);
}

.ivi-bell[b-rqf1t0u5gr]  .ivi-bell__all.mud-menu-item {
    margin-top: 4px;
    margin-bottom: 4px;
    color: var(--inf-primary);
    font-weight: 600;
}

.ivi-bell[b-rqf1t0u5gr]  .ivi-bell__all .mud-menu-item-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
/* /Components/Shared/Player/AnnotationEditor.razor.rz.scp.css */
.ae-root[b-rvrysit1s8] {
    display: flex;
    flex-direction: column;
}

.ae-head[b-rvrysit1s8] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: -4px -4px 0 0;
}

.ae-head[b-rvrysit1s8]  .ae-title {
    flex: 1 1 auto;
    min-width: 0;
}

.ae-detection[b-rvrysit1s8] {
    font-size: 0.8125rem;
    line-height: 1.35;
    padding: 8px 10px;
    border-radius: var(--inf-radius);
    border: 1px solid var(--inf-divider);
    background: var(--inf-surface-muted);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ae-source[b-rvrysit1s8] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.ae-swatch[b-rvrysit1s8] {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex: none;
}

.ae-description[b-rvrysit1s8] {
    color: var(--inf-text-2);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ae-actions[b-rvrysit1s8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 10px;
}

/* §12 — «Ошибка» on a run's box: the button, the reasons (inside the popover), the red chip of a marked box. */
.ae-verdict[b-rvrysit1s8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin-top: 8px;
}

/* Requirements §11.2: dark semantic text on its tint (never white on saturated red), with the warning icon. */
.ae-wrong-chip[b-rvrysit1s8] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
    padding: 2px 10px 2px 6px;
    border-radius: 999px;
    font-size: 0.8125rem;
    line-height: 1.35;
    font-weight: 600;
    color: var(--inf-error);
    background: var(--inf-error-bg);
}

/* «Верно» (K's cross request a): the positive verdict, the success pair of the theme. */
.ae-correct-chip[b-rvrysit1s8] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
    padding: 2px 10px 2px 6px;
    border-radius: 999px;
    font-size: 0.8125rem;
    line-height: 1.35;
    font-weight: 600;
    color: var(--inf-success);
    background: var(--inf-success-bg);
}

.ae-correct-chip[b-rvrysit1s8]  svg,
.ae-wrong-chip[b-rvrysit1s8]  svg {
    fill: currentColor;
    flex: none;
}

.ae-verdict-actions[b-rvrysit1s8] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
}

.ae-menu[b-rvrysit1s8] {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 4px;
    border: 1px solid var(--inf-divider);
    border-radius: var(--inf-radius);
    background: var(--inf-surface);
    box-shadow: var(--inf-shadow-card);
}

.ae-menu-item[b-rvrysit1s8] {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--inf-text);
    font: inherit;
    font-size: 0.875rem;
    text-align: left;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
}

.ae-menu-item:hover[b-rvrysit1s8],
.ae-menu-item:focus-visible[b-rvrysit1s8] {
    background: var(--inf-hover);
    outline: none;
}

.ae-menu-item[disabled][b-rvrysit1s8] {
    color: var(--inf-text-3);
    cursor: default;
}

.ae-menu-current[b-rvrysit1s8] {
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--inf-error);
}

.ae-verdict-form[b-rvrysit1s8] {
    display: flex;
    flex-direction: column;
}
/* /Components/Shared/Player/KindPicker.razor.rz.scp.css */
.kp-root[b-qavm372eh7] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kp-list[b-qavm372eh7] {
    max-height: 208px;
    overflow-y: auto;
    border: 1px solid var(--inf-border-control);
    border-radius: var(--inf-radius);
    padding: 2px 0;
}

.kp-family[b-qavm372eh7] {
    position: sticky;
    top: 0;
    padding: 4px 10px 2px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--inf-text-2);
    background: var(--inf-surface);
}

.kp-item[b-qavm372eh7] {
    appearance: none;
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    color: var(--inf-text);
    font: inherit;
    font-size: 0.875rem;
    padding: 6px 10px 6px 18px;
    cursor: pointer;
}

.kp-item:hover[b-qavm372eh7],
.kp-item:focus-visible[b-qavm372eh7] {
    background: var(--inf-hover);
    outline: none;
}

.kp-item:focus-visible[b-qavm372eh7] {
    box-shadow: inset 0 0 0 2px var(--inf-focus);
}

/* The chosen kind: teal tint with the selection marker (DESIGN-ui-theme.md inf-selected), not a filled bar. */
.kp-selected[b-qavm372eh7] {
    background: var(--inf-primary-tint);
    color: var(--inf-primary-emphasis);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--inf-primary);
}

.kp-selected:hover[b-qavm372eh7],
.kp-selected:focus-visible[b-qavm372eh7] {
    background: var(--inf-primary-tint-strong);
}

.kp-empty[b-qavm372eh7] {
    padding: 8px 10px;
    font-size: 0.8125rem;
    color: var(--inf-text-2);
}
/* /Components/Shared/Player/RecordingPlayer.razor.rz.scp.css */
/* DESIGN-review-and-verification.md §5.4 — the recording player. Elements that recording-player.js creates
   (lane rows, tooltip lines) and child components (MudIcon's svg) carry no scope attribute: ::deep. */

.vp-skeleton[b-coic2fh3k9] {
    width: 100%;
    aspect-ratio: 16 / 10;
    max-height: 62vh;
}

.vp-root[b-coic2fh3k9] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    outline: none;
    /* The timeline canvas reads these two (recording-player.js drawTimeline): grid lines and the time axis. */
    --vp-grid: var(--inf-divider);
    --vp-ink: var(--inf-text-2);
}

.vp-stage-wrap[b-coic2fh3k9] {
    position: relative;
}

.vp-stage[b-coic2fh3k9] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    /* Leaves the controls and the timeline on screen under a full-width player (letterboxed beyond). */
    max-height: 62vh;
    background: #000;
    border-radius: var(--inf-radius);
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

.vp-stage canvas[b-coic2fh3k9] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* §11.2: the proxy video under the canvases. It letterboxes exactly like the canvases' fitContain (object-fit:
   contain on the same box), and the 180° rotation is CSS here — the still and the boxes are rotated when drawn. */
.vp-video[b-coic2fh3k9] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: none;
    background: #000;
    pointer-events: none;
}

.vp-root[data-mode="video"] .vp-video[b-coic2fh3k9] {
    display: block;
}

.vp-root[data-mode="video"][data-rotate="1"] .vp-video[b-coic2fh3k9] {
    transform: rotate(180deg);
}

/* Paused on the video: the full-resolution still of the frame cross-fades in over it; playing, it fades out. */
.vp-root[data-mode="video"] .vp-frame[b-coic2fh3k9] {
    opacity: 0;
    transition: opacity 160ms ease-out;
}

.vp-root[data-mode="video"][data-still="1"] .vp-frame[b-coic2fh3k9] {
    opacity: 1;
}

.vp-buffering[b-coic2fh3k9] {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 26px;
    height: 26px;
    display: none;
    pointer-events: none;
}

.vp-root[data-buffering="1"] .vp-buffering[b-coic2fh3k9] {
    display: block;
}

.vp-buffering span[b-coic2fh3k9] {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    animation: vp-spin-b-coic2fh3k9 0.8s linear infinite;
}

@keyframes vp-spin-b-coic2fh3k9 {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .vp-buffering span[b-coic2fh3k9] {
        animation-duration: 2.4s;
    }

    .vp-root[data-mode="video"] .vp-frame[b-coic2fh3k9] {
        transition: none;
    }
}

.vp-overlay[b-coic2fh3k9] {
    touch-action: pan-y;
}

.vp-root[data-annotate="1"] .vp-overlay[b-coic2fh3k9] {
    cursor: crosshair;
    touch-action: none;
}

.vp-root[data-annotate="1"] .vp-stage[b-coic2fh3k9] {
    box-shadow: 0 0 0 3px var(--inf-warning);
}

.vp-status[b-coic2fh3k9] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.875rem;
    pointer-events: none;
    white-space: nowrap;
}

.vp-status[hidden][b-coic2fh3k9] {
    display: none;
}

/* The transport bar: a quiet strip under the stage — round icon buttons, a filled teal play button, the speed and
   the clock; the toggles (hide wrong, rotate, mark a defect) on the right. */
.vp-controls[b-coic2fh3k9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    border: 1px solid var(--inf-divider);
    border-radius: var(--inf-radius);
    background: var(--inf-surface-muted);
}

.vp-btn[b-coic2fh3k9] {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--inf-text);
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: none;
}

.vp-btn:hover[b-coic2fh3k9] {
    background: var(--inf-hover);
    color: var(--inf-primary-emphasis);
}

.vp-btn:focus-visible[b-coic2fh3k9] {
    outline: 2px solid var(--inf-focus);
    outline-offset: 1px;
}

.vp-btn[aria-pressed="true"][b-coic2fh3k9] {
    color: var(--inf-primary-emphasis);
    background: var(--inf-primary-tint);
}

.vp-play[b-coic2fh3k9] {
    background: var(--inf-primary);
    color: var(--mud-palette-primary-text);
    margin: 0 4px;
}

.vp-play:hover[b-coic2fh3k9],
.vp-play[aria-pressed="true"][b-coic2fh3k9] {
    background: var(--inf-primary-emphasis);
    color: var(--mud-palette-primary-text);
}

.vp-btn[b-coic2fh3k9]  svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.vp-play[b-coic2fh3k9]  svg {
    width: 28px;
    height: 28px;
}

.vp-play span[b-coic2fh3k9] {
    display: inline-flex;
}

.vp-root[data-playing="1"] .vp-icon-play[b-coic2fh3k9],
.vp-root[data-playing="0"] .vp-icon-pause[b-coic2fh3k9] {
    display: none;
}

/* §12 «Скрыть отмеченные ошибки»: the icon says what the frame shows now. */
.vp-hide-wrong span[b-coic2fh3k9] {
    display: inline-flex;
}

.vp-root:not([data-hide-wrong="1"]) .vp-icon-wrong-hidden[b-coic2fh3k9],
.vp-root[data-hide-wrong="1"] .vp-icon-wrong-shown[b-coic2fh3k9] {
    display: none;
}

.vp-annotate[b-coic2fh3k9] {
    width: auto;
    height: 36px;
    border-radius: var(--inf-radius);
    padding: 0 14px 0 10px;
    gap: 6px;
    border: 1px solid var(--inf-primary);
    background: var(--inf-surface);
    color: var(--inf-primary);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    margin-left: 4px;
}

.vp-annotate:hover[b-coic2fh3k9] {
    background: var(--inf-primary-tint);
}

.vp-annotate[aria-pressed="true"][b-coic2fh3k9] {
    border-color: var(--inf-warning);
    color: var(--inf-warning);
    background: var(--inf-warning-bg);
}

.vp-annotate[b-coic2fh3k9]  svg {
    width: 18px;
    height: 18px;
}

.vp-speed[b-coic2fh3k9] {
    height: 32px;
    margin: 0 6px;
    padding: 0 6px;
    border: 1px solid var(--inf-border-control);
    border-radius: 6px;
    background: var(--inf-surface);
    color: var(--inf-text);
    font: inherit;
    font-size: 0.8125rem;
}

.vp-speed:focus-visible[b-coic2fh3k9] {
    outline: 2px solid var(--inf-focus);
    outline-offset: 1px;
}

.vp-clock[b-coic2fh3k9] {
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--inf-text-2);
    white-space: nowrap;
    margin: 0 4px;
}

/* §11.2 «Видео готовится… NN %»: the JPEG fallback is on while the proxy video is being prepared. */
.vp-proxy[b-coic2fh3k9] {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    margin: 0 4px;
    border-radius: 11px;
    font-size: 0.75rem;
    white-space: nowrap;
    font-weight: 600;
    color: var(--inf-info);
    background: var(--inf-info-bg);
    border: 0;
    cursor: default;
}

.vp-proxy[data-state="failed"][b-coic2fh3k9] {
    color: var(--inf-neutral);
    background: var(--inf-neutral-bg);
}

.vp-proxy[hidden][b-coic2fh3k9] {
    display: none;
}

.vp-spacer[b-coic2fh3k9] {
    flex: 1 1 auto;
}

.vp-hint[b-coic2fh3k9] {
    display: none;
    padding: 6px 10px;
    border-radius: var(--inf-radius);
    font-size: 0.8125rem;
    color: var(--inf-warning);
    background: var(--inf-warning-bg);
}

.vp-root[data-annotate="1"] .vp-hint[b-coic2fh3k9] {
    display: block;
}

.vp-timeline[b-coic2fh3k9] {
    display: grid;
    grid-template-columns: minmax(96px, 180px) minmax(0, 1fr);
    column-gap: 8px;
    align-items: start;
}

.vp-lane-labels[b-coic2fh3k9] {
    min-width: 0;
}

.vp-lane-labels[b-coic2fh3k9]  .vp-lane-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    color: var(--inf-text);
}

.vp-lane-labels[b-coic2fh3k9]  .vp-lane-text {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* The « (2)» / «· 24.09 17:43» that tells runs of one configuration apart never ellipsizes. */
.vp-lane-labels[b-coic2fh3k9]  .vp-lane-tail {
    flex: none;
    white-space: pre;
    margin-left: -6px;
}

.vp-lane-labels[b-coic2fh3k9]  .vp-lane-empty {
    color: var(--inf-text-2);
}

.vp-lane-labels[b-coic2fh3k9]  .vp-swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex: none;
    background: var(--vp-lane);
}

.vp-lane-labels[b-coic2fh3k9]  .vp-swatch-dashed {
    background: transparent;
    border: 2px dashed var(--vp-lane);
    width: 10px;
    height: 10px;
    box-sizing: border-box;
}

.vp-timeline-track[b-coic2fh3k9] {
    position: relative;
    min-height: 34px;
    cursor: pointer;
    touch-action: none;
    border-radius: 6px;
    border: 1px solid var(--inf-divider);
    background: var(--inf-surface-muted);
}

.vp-timeline-canvas[b-coic2fh3k9] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.vp-playhead[b-coic2fh3k9] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    margin-left: -1px;
    background: var(--inf-primary);
    pointer-events: none;
    will-change: transform;
}

.vp-tip[b-coic2fh3k9] {
    position: absolute;
    z-index: 6;
    min-width: 140px;
    max-width: 280px;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--inf-text);
    background: var(--inf-surface);
    border: 1px solid var(--inf-divider);
    box-shadow: var(--inf-shadow-overlay);
    pointer-events: none;
}

.vp-tip[hidden][b-coic2fh3k9] {
    display: none;
}

.vp-tip[b-coic2fh3k9]  .vp-tip-title {
    font-weight: 600;
    margin-bottom: 2px;
}

.vp-tip[b-coic2fh3k9]  .vp-tip-meta {
    color: var(--inf-text-2);
    margin-top: 2px;
}

.vp-keys[b-coic2fh3k9] {
    font-size: 0.75rem;
    color: var(--inf-text-2);
}

.vp-pop[b-coic2fh3k9] {
    position: absolute;
    z-index: 30;
    left: 8px;
    top: 8px;
    width: 320px;
    max-width: calc(100% - 16px);
    max-height: min(80vh, 560px);
    overflow-y: auto;
    padding: 12px 14px 14px;
    border-radius: var(--inf-radius-lg);
    background: var(--inf-surface);
    color: var(--inf-text);
    box-shadow: var(--inf-shadow-overlay);
    border: 1px solid var(--inf-divider);
}

@media (max-width: 599.98px) {
    .vp-pop[b-coic2fh3k9] {
        position: fixed;
        left: 0 !important;
        right: 0;
        top: auto !important;
        bottom: 0;
        width: auto;
        max-width: none;
        max-height: 72vh;
        border-radius: 12px 12px 0 0;
        z-index: 1300;
    }

    .vp-timeline[b-coic2fh3k9] {
        grid-template-columns: minmax(64px, 92px) minmax(0, 1fr);
        column-gap: 6px;
    }

    .vp-btn:not(.vp-annotate)[b-coic2fh3k9] {
        width: 40px;
        height: 40px;
    }

    /* Brief §5.8: 40 px touch targets on phones; the desktop 36 px pill stays compact beside the 40 px round buttons. */
    .vp-annotate[b-coic2fh3k9] {
        height: 40px;
    }

    .vp-controls[b-coic2fh3k9] {
        padding: 4px;
    }

    .vp-clock[b-coic2fh3k9] {
        order: 10;
        width: 100%;
        margin: 2px 0 0;
    }

    .vp-keys[b-coic2fh3k9] {
        display: none;
    }
}
/* /Components/Shared/Player/RegionList.razor.rz.scp.css */
/* DESIGN-review-and-verification.md §11.3 — «Области на кадре». The rows are created by recording-player.js and
   carry no scope attribute: ::deep. */

.vp-regions[b-9fx4ena3oa] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.vp-regions-head[b-9fx4ena3oa] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vp-regions-head[b-9fx4ena3oa]  .vp-regions-icon {
    color: var(--inf-primary);
}

.vp-regions-title[b-9fx4ena3oa] {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.4;
}

.vp-regions-count[b-9fx4ena3oa] {
    min-width: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 22px;
    text-align: center;
    color: var(--inf-primary-emphasis);
    background: var(--inf-primary-tint);
}

.vp-regions-count:empty[b-9fx4ena3oa] {
    display: none;
}

.vp-regions-list[b-9fx4ena3oa] {
    display: flex;
    flex-direction: column;
    max-height: min(46vh, 420px);
    overflow-y: auto;
    margin: 0 -16px;
    outline: none;
}

.vp-regions-list[b-9fx4ena3oa]  .vp-region {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 8px 8px 16px;
    border-top: 1px solid var(--inf-divider-soft);
    cursor: pointer;
    font-size: 0.8125rem;
    line-height: 1.35;
    outline: none;
}

.vp-regions-list[b-9fx4ena3oa]  .vp-region:first-child {
    border-top: 0;
}

.vp-regions-list[b-9fx4ena3oa]  .vp-region-hover,
.vp-regions-list[b-9fx4ena3oa]  .vp-region:focus-visible {
    background: var(--inf-hover);
}

.vp-regions-list[b-9fx4ena3oa]  .vp-region:focus-visible {
    box-shadow: inset 0 0 0 2px var(--inf-focus);
}

.vp-regions-list[b-9fx4ena3oa]  .vp-region-selected {
    box-shadow: inset 3px 0 0 var(--inf-primary);
    background: var(--inf-primary-tint);
}

.vp-regions-list[b-9fx4ena3oa]  .vp-region-hidden .vp-region-body,
.vp-regions-list[b-9fx4ena3oa]  .vp-region-hidden .vp-swatch {
    opacity: 0.45;
}

.vp-regions-list[b-9fx4ena3oa]  .vp-swatch {
    width: 10px;
    height: 10px;
    margin-top: 4px;
    border-radius: 2px;
    flex: none;
    background: var(--vp-lane);
}

.vp-regions-list[b-9fx4ena3oa]  .vp-swatch-dashed {
    background: transparent;
    border: 2px dashed var(--vp-lane);
    box-sizing: border-box;
}

.vp-regions-list[b-9fx4ena3oa]  .vp-region-body {
    flex: 1 1 auto;
    min-width: 0;
}

.vp-regions-list[b-9fx4ena3oa]  .vp-region-top {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.vp-regions-list[b-9fx4ena3oa]  .vp-region-kind {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.vp-regions-list[b-9fx4ena3oa]  .vp-region-cls {
    color: var(--inf-text-2);
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 0 1 auto;
}

.vp-regions-list[b-9fx4ena3oa]  .vp-region-conf {
    margin-left: auto;
    flex: none;
    font-variant-numeric: tabular-nums;
    color: var(--inf-text-2);
}

.vp-regions-list[b-9fx4ena3oa]  .vp-region-lane,
.vp-regions-list[b-9fx4ena3oa]  .vp-region-desc {
    color: var(--inf-text-2);
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vp-regions-list[b-9fx4ena3oa]  .vp-region-eye {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--inf-text-2);
    width: 32px;
    height: 32px;
    margin: -4px 0 -4px 0;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: none;
}

.vp-regions-list[b-9fx4ena3oa]  .vp-region-eye:hover {
    background: var(--inf-hover);
    color: var(--inf-text);
}

.vp-regions-list[b-9fx4ena3oa]  .vp-region-eye:focus-visible {
    outline: 2px solid var(--inf-primary);
    outline-offset: -2px;
}

.vp-regions-list[b-9fx4ena3oa]  .vp-region-eye[aria-pressed="true"] {
    color: var(--inf-warning);
}

.vp-regions-list[b-9fx4ena3oa]  .vp-region-eye svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.vp-regions-list[b-9fx4ena3oa]  .vp-region-empty {
    padding: 6px 16px;
    font-size: 0.8125rem;
    color: var(--inf-text-2);
}

.vp-regions-hint[b-9fx4ena3oa] {
    font-size: 0.75rem;
    color: var(--inf-text-2);
}

@media (max-width: 599.98px) {
    .vp-regions-list[b-9fx4ena3oa] {
        max-height: 40vh;
    }

    .vp-regions-hint[b-9fx4ena3oa] {
        display: none;
    }
}

/* §12 — «Ошибка» on a detection row: the button, the reasons under it, the red chip and «Отменить» of a marked one. */
.vp-regions-list[b-9fx4ena3oa]  .vp-region-verdict {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

.vp-regions-list[b-9fx4ena3oa]  .vp-verdict-btn,
.vp-regions-list[b-9fx4ena3oa]  .vp-verdict-undo,
.vp-regions-list[b-9fx4ena3oa]  .vp-verdict-chip {
    appearance: none;
    font: inherit;
    font-size: 0.75rem;
    line-height: 1.4;
    padding: 1px 8px;
    border-radius: 11px;
    cursor: pointer;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vp-regions-list[b-9fx4ena3oa]  .vp-verdict-btn {
    border: 1px solid var(--inf-error);
    color: var(--inf-error);
    background: transparent;
}

/* Requirements §11.2: a chip is dark semantic text on its tint, never white on saturated red. */
.vp-regions-list[b-9fx4ena3oa]  .vp-verdict-chip {
    border: 1px solid var(--inf-error);
    color: var(--inf-error);
    background: var(--inf-error-bg);
    font-weight: 600;
}

/* «Верно» (DESIGN-improve-20261015.md §3 K): the positive verdict in the success pair of the theme. */
.vp-regions-list[b-9fx4ena3oa]  .vp-verdict-btn-correct {
    border-color: var(--inf-success);
    color: var(--inf-success);
}

.vp-regions-list[b-9fx4ena3oa]  .vp-verdict-correct {
    border-color: var(--inf-success);
    color: var(--inf-success);
    background: var(--inf-success-bg);
    cursor: default;
}

.vp-regions-list[b-9fx4ena3oa]  .vp-verdict-undo {
    border: 1px solid var(--inf-divider);
    color: var(--inf-text);
    background: transparent;
}

.vp-regions-list[b-9fx4ena3oa]  .vp-verdict-btn:hover,
.vp-regions-list[b-9fx4ena3oa]  .vp-verdict-undo:hover {
    background: var(--inf-hover);
}

.vp-regions-list[b-9fx4ena3oa]  .vp-verdict-btn:focus-visible,
.vp-regions-list[b-9fx4ena3oa]  .vp-verdict-undo:focus-visible,
.vp-regions-list[b-9fx4ena3oa]  .vp-verdict-chip:focus-visible,
.vp-regions-list[b-9fx4ena3oa]  .vp-verdict-item:focus-visible {
    outline: 2px solid var(--inf-primary);
    outline-offset: 1px;
}

.vp-regions-list[b-9fx4ena3oa]  .vp-verdict-menu {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 2px;
    padding: 2px 0;
    border: 1px solid var(--inf-divider);
    border-radius: 4px;
    background: var(--inf-surface);
    cursor: default;
}

.vp-regions-list[b-9fx4ena3oa]  .vp-verdict-item {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--inf-text);
    font: inherit;
    font-size: 0.8125rem;
    text-align: left;
    padding: 6px 10px;
    cursor: pointer;
}

.vp-regions-list[b-9fx4ena3oa]  .vp-verdict-item:hover {
    background: var(--inf-hover);
}

.vp-regions-list[b-9fx4ena3oa]  .vp-verdict-current {
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--inf-error);
}

.vp-regions-list[b-9fx4ena3oa]  .vp-region-wrong .vp-region-kind {
    text-decoration: line-through;
    text-decoration-color: var(--inf-error);
}

/* «Скрыть отмеченные ошибки»: the box leaves the frame; its row stays, dimmed, so the mark can be undone. */
.vp-regions-list[b-9fx4ena3oa]  .vp-region-hidden-wrong .vp-region-top,
.vp-regions-list[b-9fx4ena3oa]  .vp-region-hidden-wrong .vp-region-lane,
.vp-regions-list[b-9fx4ena3oa]  .vp-region-hidden-wrong .vp-region-desc,
.vp-regions-list[b-9fx4ena3oa]  .vp-region-hidden-wrong .vp-swatch {
    opacity: 0.45;
}

@media (max-width: 599.98px) {
    .vp-regions-list[b-9fx4ena3oa]  .vp-verdict-btn,
    .vp-regions-list[b-9fx4ena3oa]  .vp-verdict-undo,
    .vp-regions-list[b-9fx4ena3oa]  .vp-verdict-chip {
        padding: 4px 10px;
        font-size: 0.8125rem;
    }

    .vp-regions-list[b-9fx4ena3oa]  .vp-verdict-item {
        padding: 10px 12px;
    }
}