@import 'Center.SiteBuilder.Client.u1uqeev88m.bundle.scp.css';
@import '_content/Center.Design/Center.Design.37zmyew3sp.bundle.scp.css';

/* /Components/Commerce/ConnectorFilterEditor.razor.rz.scp.css */
.filter-editor[b-yjx09skcqf] {
    min-width: 0;
    overflow-wrap: anywhere;
    border-color: color-mix(in srgb, var(--app-accent) 30%, var(--app-line));
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--app-accent-soft) 42%, transparent), transparent 22rem),
        var(--app-panel);
}

.filter-heading[b-yjx09skcqf] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.filter-heading > div[b-yjx09skcqf] {
    min-width: 0;
}

.filter-kicker[b-yjx09skcqf] {
    margin: 0 0 4px;
    color: var(--app-accent);
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.filter-heading h2[b-yjx09skcqf] {
    margin-bottom: 8px;
}

.filter-heading .sb-console-hint[b-yjx09skcqf] {
    max-width: 72ch;
    margin-bottom: 0;
}

.filter-state[b-yjx09skcqf] {
    flex: 0 0 auto;
    max-width: 18rem;
    padding: 5px 10px;
    border: 1px solid var(--app-line);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
}

.filter-state-draft[b-yjx09skcqf] {
    border-color: color-mix(in srgb, var(--app-warning) 38%, var(--app-line));
    background: var(--app-warning-soft);
    color: var(--app-warning);
}

.filter-state-waiting[b-yjx09skcqf] {
    border-color: color-mix(in srgb, var(--app-accent) 38%, var(--app-line));
    background: var(--app-accent-soft);
    color: var(--app-accent);
}

.filter-state-saved[b-yjx09skcqf] {
    border-color: color-mix(in srgb, var(--app-success) 38%, var(--app-line));
    background: var(--app-success-soft);
    color: var(--app-success);
}

.filter-loading[b-yjx09skcqf],
.filter-load-error[b-yjx09skcqf],
.filter-recovery[b-yjx09skcqf] {
    padding: 16px;
    border: 1px solid var(--app-line);
    border-radius: var(--ds-radius-md);
    background: var(--app-bg);
}

.filter-load-error[b-yjx09skcqf],
.filter-recovery[b-yjx09skcqf] {
    border-color: color-mix(in srgb, var(--app-danger) 36%, var(--app-line));
    color: var(--app-danger);
}

.filter-load-error p[b-yjx09skcqf],
.filter-recovery p[b-yjx09skcqf] {
    margin: 0 0 12px;
}

.filter-summary[b-yjx09skcqf] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.filter-summary-card[b-yjx09skcqf] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--app-line);
    border-radius: var(--ds-radius-md);
    background: color-mix(in srgb, var(--app-panel) 84%, var(--app-bg));
}

.filter-summary-card-primary[b-yjx09skcqf] {
    border-color: color-mix(in srgb, var(--app-accent) 42%, var(--app-line));
    box-shadow: inset 0 3px 0 color-mix(in srgb, var(--app-accent) 78%, transparent);
}

.filter-summary-index[b-yjx09skcqf] {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 50%;
    background: var(--app-accent-soft);
    color: var(--app-accent);
    font-size: 11px;
    font-weight: 800;
}

.filter-summary-card h3[b-yjx09skcqf] {
    margin: 1px 0 7px;
    font-size: 16px;
}

.filter-summary-card p[b-yjx09skcqf] {
    margin: 0 0 10px;
    color: var(--app-muted);
    font-size: 13px;
    line-height: 1.5;
}

.filter-summary-list[b-yjx09skcqf] {
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 2px;
    min-width: 0;
    color: var(--app-muted);
    font-size: 12px;
}

.filter-summary-list li[b-yjx09skcqf] {
    overflow-wrap: anywhere;
}

.filter-summary-item[b-yjx09skcqf] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.filter-summary-link[b-yjx09skcqf] {
    min-height: 32px;
    border: 0;
    background: transparent;
    color: var(--app-accent);
    font: inherit;
    font-size: 12px;
    text-align: left;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    cursor: pointer;
    padding: 0;
    min-width: 0;
    border-radius: var(--ds-radius-sm);
}

.filter-summary-link:focus-visible[b-yjx09skcqf] {
    outline: 2px solid color-mix(in srgb, var(--app-accent) 70%, transparent);
    outline-offset: 2px;
}

.filter-summary-clear[b-yjx09skcqf] {
    flex: 0 0 auto;
    min-height: 24px;
    padding: 2px 8px;
    border: 1px solid var(--app-line);
    border-radius: var(--ds-radius-sm);
    background: transparent;
    color: var(--app-text);
    font-size: 11px;
}

.filter-summary-clear:hover[b-yjx09skcqf] {
    background: var(--app-accent-soft);
    color: var(--app-accent);
}

.filter-summary-clear:focus-visible[b-yjx09skcqf] {
    outline: var(--ds-focus-ring);
    outline-offset: 2px;
}

.filter-summary-actions[b-yjx09skcqf] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
    margin: 0 0 8px;
}

.filter-summary-clear-all[b-yjx09skcqf] {
    min-height: 30px;
}

.filter-summary-link:disabled[b-yjx09skcqf] {
    color: var(--app-muted);
    text-decoration-thickness: 1px;
    cursor: not-allowed;
}

.filter-summary-link:hover[b-yjx09skcqf] {
    text-decoration-thickness: 2px;
}

.filter-link-button[b-yjx09skcqf] {
    min-height: 44px;
    padding: 8px 0;
    border: 0;
    background: transparent;
    color: var(--app-accent);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    cursor: pointer;
}

.filter-link-button:hover[b-yjx09skcqf] {
    text-decoration-thickness: 2px;
}

.filter-link-button:focus-visible[b-yjx09skcqf],
.filter-summary-link:focus-visible[b-yjx09skcqf],
.filter-disclosure:focus-visible[b-yjx09skcqf],
.filter-remove:focus-visible[b-yjx09skcqf],
.filter-add-condition:focus-visible[b-yjx09skcqf],
.filter-clear-all:focus-visible[b-yjx09skcqf],
.filter-clear-stream:focus-visible[b-yjx09skcqf],
.filter-editor :is(input, select, textarea, fieldset):focus-visible[b-yjx09skcqf] {
    outline: var(--ds-focus-ring);
    outline-offset: 2px;
}

.filter-card-note[b-yjx09skcqf],
.filter-help[b-yjx09skcqf],
.filter-safe-note[b-yjx09skcqf],
.filter-technical[b-yjx09skcqf],
.filter-control small[b-yjx09skcqf],
.filter-group-choice small[b-yjx09skcqf],
.filter-ungrouped small[b-yjx09skcqf] {
    color: var(--app-muted);
    font-size: 12px;
    line-height: 1.45;
}

.filter-apply-note[b-yjx09skcqf] {
    margin: 14px 0 0;
    padding: 12px 14px;
    border-left: 4px solid var(--app-warning);
    border-radius: var(--ds-radius-sm);
    background: var(--app-warning-soft);
    color: var(--app-warning);
    font-size: 13px;
    line-height: 1.5;
}

.filter-fieldset[b-yjx09skcqf] {
    min-width: 0;
    margin: 20px 0 0;
    padding: 16px;
    border: 1px solid var(--app-line);
    border-radius: var(--ds-radius-md);
    background: var(--app-panel);
}

.filter-fieldset > legend[b-yjx09skcqf] {
    width: auto;
    margin: 0;
    padding: 0 8px;
    color: var(--app-text);
    font-size: 16px;
    font-weight: 750;
}

.filter-fieldset:disabled[b-yjx09skcqf] {
    opacity: .72;
}

.filter-help[b-yjx09skcqf] {
    max-width: 78ch;
    margin: 0 0 14px;
}

.filter-inline-error[b-yjx09skcqf] {
    margin: 0;
    padding: 11px 12px;
    border: 1px solid color-mix(in srgb, var(--app-danger) 36%, var(--app-line));
    border-radius: var(--ds-radius-sm);
    background: var(--app-danger-soft);
    color: var(--app-danger);
    font-size: 13px;
}

.filter-mode-grid[b-yjx09skcqf] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.filter-mode-option[b-yjx09skcqf],
.filter-ungrouped[b-yjx09skcqf] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    min-height: 44px;
    padding: 11px 12px;
    border: 1px solid var(--app-line);
    border-radius: var(--ds-radius-sm);
    background: var(--app-bg);
    cursor: pointer;
}

.filter-mode-option:has(input:checked)[b-yjx09skcqf],
.filter-ungrouped:has(input:checked)[b-yjx09skcqf] {
    border-color: color-mix(in srgb, var(--app-accent) 52%, var(--app-line));
    background: var(--app-accent-soft);
}

.filter-mode-option input[b-yjx09skcqf],
.filter-ungrouped input[b-yjx09skcqf],
.filter-group-choice input[b-yjx09skcqf] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
    accent-color: var(--app-accent);
}

.filter-mode-option span[b-yjx09skcqf],
.filter-ungrouped span[b-yjx09skcqf],
.filter-group-choice span[b-yjx09skcqf] {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.filter-mode-option strong[b-yjx09skcqf],
.filter-ungrouped strong[b-yjx09skcqf],
.filter-group-choice strong[b-yjx09skcqf] {
    color: var(--app-text);
    font-size: 13px;
    line-height: 1.35;
}

.filter-mode-option small[b-yjx09skcqf] {
    color: var(--app-muted);
    font-size: 12px;
    line-height: 1.4;
}

.filter-groups-panel[b-yjx09skcqf] {
    display: grid;
    min-width: 0;
    gap: 12px;
    margin-top: 14px;
    padding: 14px;
    border-radius: var(--ds-radius-sm);
    background: color-mix(in srgb, var(--app-bg) 82%, var(--app-panel));
}

.filter-search[b-yjx09skcqf] {
    display: grid;
    gap: 6px;
}

.filter-search > label[b-yjx09skcqf],
.filter-control > label[b-yjx09skcqf] {
    color: var(--app-text);
    font-size: 13px;
    font-weight: 650;
}

.filter-search-row[b-yjx09skcqf] {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) auto auto;
    gap: 8px;
}

.filter-editor :is(input[type="text"], input[type="search"], select, textarea)[b-yjx09skcqf] {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 9px 11px;
    border: 1px solid var(--app-line);
    border-radius: var(--ds-radius-sm);
    background: var(--app-panel);
    color: var(--app-text);
    font: inherit;
    font-size: 13px;
}

.filter-editor textarea[b-yjx09skcqf] {
    resize: vertical;
}

.filter-search-row > button[b-yjx09skcqf],
.filter-actions[b-yjx09skcqf]  .btn,
.filter-search-row[b-yjx09skcqf]  .btn,
.filter-load-error[b-yjx09skcqf]  .btn,
.filter-recovery[b-yjx09skcqf]  .btn {
    min-height: 44px;
}

.filter-group-search-status[b-yjx09skcqf] {
    min-height: 20px;
    color: var(--app-muted);
    font-size: 12px;
}

.filter-error-text[b-yjx09skcqf] {
    color: var(--app-danger) !important;
}

.filter-groups[b-yjx09skcqf] {
    min-width: 0;
    max-height: 25rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--app-line);
    border-radius: var(--ds-radius-sm);
    background: var(--app-panel);
}

.filter-group-list[b-yjx09skcqf],
.filter-group-list ul[b-yjx09skcqf] {
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.filter-group-list ul[b-yjx09skcqf] {
    margin-left: 22px;
    border-left: 1px solid var(--app-line);
}

.filter-group-row[b-yjx09skcqf] {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 5px 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--app-line) 70%, transparent);
}

.filter-disclosure[b-yjx09skcqf],
.filter-disclosure-placeholder[b-yjx09skcqf] {
    display: grid;
    width: 32px;
    min-width: 32px;
    min-height: 32px;
    place-items: center;
}

.filter-disclosure[b-yjx09skcqf] {
    border: 1px solid var(--app-line);
    border-radius: var(--ds-radius-sm);
    background: var(--app-bg);
    color: var(--app-accent);
    font: inherit;
    font-size: 18px;
    cursor: pointer;
}

.filter-group-choice[b-yjx09skcqf] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    min-width: 0;
    min-height: 44px;
    padding: 10px 4px;
    cursor: pointer;
}

.filter-technical-details[b-yjx09skcqf] {
    min-width: 0;
    color: var(--app-muted);
    font-size: 11px;
}

.filter-technical-details summary[b-yjx09skcqf] {
    min-height: 32px;
    padding: 8px 3px;
    cursor: pointer;
}

.filter-technical-details code[b-yjx09skcqf],
.filter-technical code[b-yjx09skcqf] {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.filter-ungrouped[b-yjx09skcqf] {
    justify-self: start;
}

.filter-control[b-yjx09skcqf] {
    display: grid;
    min-width: 0;
    gap: 6px;
}

.filter-required[b-yjx09skcqf] {
    margin-top: 14px;
    padding: 12px;
    border: 1px solid var(--app-line);
    border-radius: var(--ds-radius-sm);
    background: var(--app-bg);
}

.filter-required h3[b-yjx09skcqf] {
    margin: 0 0 8px;
    font-size: 14px;
}

.filter-required ul[b-yjx09skcqf] {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.filter-required li[b-yjx09skcqf] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 9px;
    font-size: 12px;
}

.filter-required li strong[b-yjx09skcqf] {
    color: var(--app-accent);
}

.filter-condition-list[b-yjx09skcqf] {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.filter-condition[b-yjx09skcqf] {
    min-width: 0;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--app-line);
    border-radius: var(--ds-radius-sm);
    background: var(--app-bg);
}

.filter-condition[aria-invalid="True"][b-yjx09skcqf],
.filter-condition[aria-invalid="true"][b-yjx09skcqf] {
    border-color: var(--app-danger);
}

.filter-condition > legend[b-yjx09skcqf] {
    width: auto;
    margin: 0;
    padding: 0 5px;
    color: var(--app-muted);
    font-size: 12px;
    font-weight: 700;
}

.filter-condition-grid[b-yjx09skcqf] {
    display: grid;
    grid-template-columns: minmax(10rem, 1fr) minmax(9rem, .75fr) minmax(12rem, 1.3fr) auto;
    align-items: start;
    gap: 10px;
    min-width: 0;
}

.filter-remove[b-yjx09skcqf] {
    align-self: end;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--app-danger) 45%, var(--app-line));
    border-radius: var(--ds-radius-sm);
    background: var(--app-danger-soft);
    color: var(--app-danger);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.filter-add-condition[b-yjx09skcqf] {
    min-height: 44px;
    margin-top: 12px;
}

.filter-clear-all[b-yjx09skcqf] {
    min-height: 44px;
    margin-top: 12px;
}

.filter-condition-actions[b-yjx09skcqf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.filter-condition-count[b-yjx09skcqf] {
    margin: 0;
    color: var(--app-muted);
    font-size: 12px;
}

.filter-status[b-yjx09skcqf] {
    min-height: 44px;
    margin-top: 18px;
    padding: 11px 13px;
    border: 1px solid var(--app-line);
    border-radius: var(--ds-radius-sm);
    background: var(--app-bg);
    color: var(--app-muted);
    font-size: 13px;
    line-height: 1.5;
}

.filter-status:focus[b-yjx09skcqf] {
    outline: var(--ds-focus-ring);
    outline-offset: 2px;
}

.filter-status-error[b-yjx09skcqf] {
    border-color: color-mix(in srgb, var(--app-danger) 45%, var(--app-line));
    background: var(--app-danger-soft);
    color: var(--app-danger);
}

.filter-result[b-yjx09skcqf] {
    min-width: 0;
}

.filter-preview[b-yjx09skcqf] {
    min-width: 0;
    margin-top: 12px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--app-success) 38%, var(--app-line));
    border-radius: var(--ds-radius-sm);
    background: var(--app-success-soft);
}

.filter-preview-error[b-yjx09skcqf] {
    border-color: color-mix(in srgb, var(--app-danger) 38%, var(--app-line));
    background: var(--app-danger-soft);
}

.filter-preview h3[b-yjx09skcqf],
.filter-preview p[b-yjx09skcqf] {
    margin: 0 0 8px;
}

.filter-preview-rows[b-yjx09skcqf] {
    display: grid;
    gap: 8px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.filter-preview-rows > li[b-yjx09skcqf] {
    min-width: 0;
    padding: 11px;
    border: 1px solid var(--app-line);
    border-radius: var(--ds-radius-sm);
    background: var(--app-panel);
}

.filter-preview-decision[b-yjx09skcqf] {
    display: inline-block;
    margin-bottom: 7px;
    color: var(--app-accent);
    font-size: 12px;
    font-weight: 750;
}

.filter-preview dl[b-yjx09skcqf],
.filter-technical-details dl[b-yjx09skcqf] {
    display: grid;
    gap: 4px;
    min-width: 0;
    margin: 0;
}

.filter-preview dl > div[b-yjx09skcqf],
.filter-technical-details dl > div[b-yjx09skcqf] {
    display: grid;
    grid-template-columns: minmax(7rem, .7fr) minmax(0, 1.3fr);
    gap: 8px;
    min-width: 0;
}

.filter-preview dt[b-yjx09skcqf],
.filter-preview dd[b-yjx09skcqf],
.filter-technical-details dt[b-yjx09skcqf],
.filter-technical-details dd[b-yjx09skcqf] {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    font-size: 12px;
}

.filter-preview dt[b-yjx09skcqf],
.filter-technical-details dt[b-yjx09skcqf] {
    color: var(--app-muted);
}

.filter-actions[b-yjx09skcqf] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.filter-safe-note[b-yjx09skcqf] {
    margin: 8px 0 0;
}

@media (max-width: 980px) {
    .filter-summary[b-yjx09skcqf],
    .filter-mode-grid[b-yjx09skcqf] {
        grid-template-columns: 1fr;
    }

    .filter-condition-grid[b-yjx09skcqf] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filter-value-control[b-yjx09skcqf] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .filter-heading[b-yjx09skcqf] {
        display: grid;
        gap: 10px;
    }

    .filter-state[b-yjx09skcqf] {
        justify-self: start;
        max-width: 100%;
    }

    .filter-summary-card[b-yjx09skcqf],
    .filter-fieldset[b-yjx09skcqf],
    .filter-groups-panel[b-yjx09skcqf],
    .filter-condition[b-yjx09skcqf],
    .filter-preview[b-yjx09skcqf] {
        padding: 12px;
    }

    .filter-search-row[b-yjx09skcqf],
    .filter-condition-grid[b-yjx09skcqf] {
        grid-template-columns: minmax(0, 1fr);
    }

    .filter-search-row > button[b-yjx09skcqf],
    .filter-search-row[b-yjx09skcqf]  .btn,
    .filter-actions[b-yjx09skcqf]  .btn,
    .filter-remove[b-yjx09skcqf] {
        width: 100%;
    }

    .filter-value-control[b-yjx09skcqf] {
        grid-column: auto;
    }

    .filter-group-row[b-yjx09skcqf] {
        grid-template-columns: 32px minmax(0, 1fr);
    }

    .filter-group-row > .filter-technical-details[b-yjx09skcqf] {
        grid-column: 2;
    }

    .filter-group-list ul[b-yjx09skcqf] {
        margin-left: 10px;
    }

    .filter-preview dl > div[b-yjx09skcqf],
    .filter-technical-details dl > div[b-yjx09skcqf] {
        grid-template-columns: minmax(0, 1fr);
        gap: 1px;
    }

    .filter-actions[b-yjx09skcqf] {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* Какое сообщение видно, решают классы состояний, которые blazor.web.js ставит на сам диалог. */
.components-reconnect-first-attempt-visible[b-al3n425me0],
.components-reconnect-repeated-attempt-visible[b-al3n425me0],
.components-reconnect-failed-visible[b-al3n425me0],
.components-pause-visible[b-al3n425me0],
.components-resume-failed-visible[b-al3n425me0],
.components-rejoining-animation[b-al3n425me0] {
    display: none;
}

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

/* Цвета — переменными консоли, чтобы тёмная тема пришла сама, а не отдельным правилом. */
#components-reconnect-modal[b-al3n425me0] {
    background: var(--app-panel);
    color: var(--app-text);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 1px solid var(--app-line);
    border-radius: 12px;
    box-shadow: 0 12px 32px color-mix(in srgb, var(--app-text) 25%, transparent);
}

/* Затемнение фона окна — не токен: тот же почти-чёрный, что и у общего .ds-dialog::backdrop
   (design.css), а он тоже литерал и тоже один на обе темы намеренно — затемнение не красится сменой
   темы. Второго имени под это в словаре нет. */
#components-reconnect-modal[b-al3n425me0]::backdrop {
    background: rgba(10, 12, 18, 0.45);
    backdrop-filter: blur(2px);
}

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

#components-reconnect-modal p[b-al3n425me0] {
    margin: 0;
}

#components-reconnect-modal button[b-al3n425me0] {
    border: 0;
    background: var(--app-accent);
    color: var(--ds-accent-contrast);
    padding: 7px 22px;
    border-radius: 8px;
    font: inherit;
    cursor: pointer;
}

#components-reconnect-modal button:hover[b-al3n425me0] {
    filter: brightness(1.08);
}

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

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

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

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

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

    100% {
        top: 0;
        left: 0;
        width: 72px;
        height: 72px;
        opacity: 0;
    }
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
/*
    Счётчик места на карточке сайта.

    Лист свой, а не строки в app.css, по одной причине: app.css в этот час правит соседняя работа, и две
    правки одного файла разъезжаются молча — на слияние, а не на сборку. Механизм не новый: рядом так же
    живёт ReconnectModal.razor.css, и лист области подхватывается тем же Center.SiteBuilder.styles.css,
    который страница и так грузит.

    Значения — переменные семейства из design.css, ни одного своего цвета: плашка «место кончилось» обязана
    выглядеть тем же предупреждением, что и «черновик ушёл вперёд» по соседству, иначе человек прочитает её
    как другой род события.
*/
.sb-dash-usage[b-uapww7ggqy] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    border: 1px solid var(--app-line);
    border-radius: 10px;
    background: var(--app-bg);
    font-size: 12.5px;
}

.sb-dash-usage p[b-uapww7ggqy] {
    margin: 0;
    color: var(--app-text);
}

/* Дата сверки — тише чисел: она уточняет их, а не спорит с ними. */
.sb-dash-usage-when[b-uapww7ggqy] {
    color: var(--app-muted);
}

/*
    Место кончилось. Цвет предупреждения, а не отказа: сайт работает, витрина отвечает, заказы принимаются —
    не принимается только новое. Красный здесь читался бы как «всё сломалось», и первым движением человека
    было бы удалять, чего от него никто не просит.
*/
.sb-dash-usage-full[b-uapww7ggqy] {
    border-color: var(--app-warning);
    background: var(--app-warning-soft);
}

.sb-dash-usage-full .sb-dash-usage-over[b-uapww7ggqy] {
    color: var(--app-warning);
}

.sb-dash-card-details[b-uapww7ggqy] {
    border-top: 1px solid var(--app-line);
    padding-top: 8px;
}

.sb-dash-card-details > summary[b-uapww7ggqy] {
    cursor: pointer;
    min-height: var(--ds-tap);
    padding: 6px 0;
    font-size: 13px;
}

.sb-dash-card-details > summary:focus-visible[b-uapww7ggqy] {
    outline: 2px solid var(--app-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

.sb-dash-card-details > summary span[b-uapww7ggqy],
.sb-dash-date-note[b-uapww7ggqy] {
    color: var(--app-muted);
    font-size: 12px;
}

.sb-dash-detail-body[b-uapww7ggqy] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px 0 2px;
}

.sb-dash-date-note[b-uapww7ggqy] { margin: 0; }
/* Creation is a visual gallery; give it room while retaining the native dialog focus boundary. */
.sb-create-dialog[b-uapww7ggqy] { width: min(1040px, calc(100vw - 32px)); max-width: calc(100vw - 32px); }
.sb-create-dialog .sb-form-grid[b-uapww7ggqy] { gap: 22px; }
.sb-create-fields[b-uapww7ggqy] { border: 0; padding: 0; margin: 0; min-width: 0; }

/* Mobile actions retain a full touch target, including buttons rendered by the shared library. */
@media (max-width: 760px) {
    .sb-dash[b-uapww7ggqy]  button,
    .sb-dash-open[b-uapww7ggqy],
    .sb-dash-launch[b-uapww7ggqy] {
        min-height: 44px;
        min-width: 44px;
    }
}
/* /Components/TemplateGallery.razor.rz.scp.css */
.sb-template-gallery[b-5bwq8je011] { min-width: 0; }
.sb-gallery-heading[b-5bwq8je011] { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; gap: 12px; margin-bottom: 18px; }
.sb-gallery-heading h3[b-5bwq8je011] { margin: 0 0 6px; font-size: 20px; letter-spacing: -.025em; }
.sb-gallery-heading p[b-5bwq8je011] { margin: 0; color: var(--app-muted); font-size: 13px; line-height: 1.5; }
.sb-gallery-count[b-5bwq8je011] { padding: 5px 9px; border: 1px solid var(--app-line); border-radius: 99px; color: var(--app-muted); font-size: 12px; white-space: nowrap; }
.sb-gallery-filters[b-5bwq8je011] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, .55fr); gap: 12px; }
.sb-gallery-filters label[b-5bwq8je011] { display: grid; gap: 6px; min-width: 0; font-size: 12px; color: var(--app-muted); }
.sb-gallery-filters input[b-5bwq8je011], .sb-gallery-filters select[b-5bwq8je011] { box-sizing: border-box; width: 100%; min-height: 44px; border: 1px solid var(--app-line); border-radius: 10px; padding: 10px 12px; background: var(--app-bg); color: var(--app-text); font: inherit; font-size: 14px; }
.sb-gallery-filters :is(input, select):focus-visible[b-5bwq8je011] { outline: 2px solid var(--app-accent); outline-offset: 2px; }
.sb-gallery-selection[b-5bwq8je011] { display: flex; align-items: center; gap: 7px; min-height: 22px; margin: 14px 0; font-size: 13px; color: var(--app-muted); }
.sb-gallery-selection strong[b-5bwq8je011] { color: var(--app-text); }
.sb-gallery-selection > span:first-child[b-5bwq8je011] { color: var(--app-accent); }
.sb-gallery-options[b-5bwq8je011] { border: 0; padding: 0; margin: 0; min-width: 0; }
.sb-tpl-grid[b-5bwq8je011] { grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 18px; }
.sb-tpl-cell[b-5bwq8je011] { min-width: 0; gap: 6px; transition: opacity var(--ds-t-enter) var(--ds-ease-out); }
.sb-tpl[b-5bwq8je011] { display: flex; flex-direction: column; margin-bottom: 0; font-weight: 400; position: relative; height: 100%; min-width: 0; padding: 10px; gap: 12px; border-radius: 14px; transition: border-color var(--ds-t-tint) var(--ds-ease-out), box-shadow var(--ds-t-tint) var(--ds-ease-out); }
.sb-tpl:hover[b-5bwq8je011] { box-shadow: 0 5px 18px color-mix(in srgb, var(--app-text) 7%, transparent); }
.sb-tpl:focus-within[b-5bwq8je011] { outline: 2px solid var(--app-accent); outline-offset: 3px; }
.sb-gallery-radio[b-5bwq8je011] { position: absolute; z-index: 1; right: 16px; top: 16px; margin: 0; width: 18px; height: 18px; accent-color: var(--app-accent); cursor: pointer; }
.sb-tpl-shot[b-5bwq8je011] { width: 100%; border-radius: 8px; }
.sb-tpl-page[b-5bwq8je011] { height: 142px; }
.sb-tpl-cover[b-5bwq8je011] { display: block; width: 100%; height: 142px; object-fit: cover; border-radius: 8px; }
.sb-tpl-band:first-child[b-5bwq8je011] { flex: 0 0 66px; }
.sb-tpl-band:first-child[b-5bwq8je011]::after { top: auto; bottom: 9px; height: 5px; }
.sb-tpl-type.sb-tpl-line[b-5bwq8je011] { top: 11px; left: 12%; right: 15%; font-size: 12px; line-height: 1.2; -webkit-line-clamp: 2; }
.sb-tpl-name[b-5bwq8je011] { font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.sb-tpl-note[b-5bwq8je011] { font-size: 12px; line-height: 1.4; }
.sb-tpl-blank[b-5bwq8je011] { justify-content: center; align-items: center; gap: 8px; color: var(--app-muted); }
.sb-tpl-blank > span[b-5bwq8je011] { font-size: 30px; font-weight: 300; line-height: 1; }
.sb-tpl-blank > small[b-5bwq8je011] { font-size: 12px; }
.sb-tpl-look[b-5bwq8je011] { min-height: 32px; display: inline-flex; align-items: center; gap: 6px; }
/* Отступ, цвет и центрирование — общие (design.css, .ds-empty); здесь остаётся только своя рамка и фон
   (Center.SiteBuilder#116, PR 2/3). Заголовок несёт словарный класс .ds-empty-title вместо своих полей. */
.sb-gallery-empty[b-5bwq8je011] { border: 1px dashed var(--app-line); border-radius: 14px; background: var(--app-bg); }
.sb-gallery-empty p[b-5bwq8je011] { font-size: 13px; line-height: 1.5; }
@starting-style { .sb-tpl-cell[b-5bwq8je011] { opacity: 0; } }
@media (max-width: 540px) { .sb-gallery-filters[b-5bwq8je011] { grid-template-columns: minmax(0, 1fr); } .sb-tpl-look[b-5bwq8je011] { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .sb-tpl-cell[b-5bwq8je011], .sb-tpl[b-5bwq8je011] { transition: none; } }