.sync-shell {
    display: grid;
    gap: 10px;
}

.overview-health-grid,
.overview-runtime-grid,
.overview-ops-grid,
.overview-domain-grid,
.overview-summary-grid,
.overview-project-management-grid {
    display: grid;
    gap: 10px;
}

.overview-health-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.overview-runtime-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.overview-health-card,
.overview-domain-card {
    display: grid;
    gap: 10px;
}

.overview-health-meta,
.overview-domain-metrics,
.overview-project-totals {
    display: grid;
    gap: 8px;
}

.overview-health-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.overview-health-meta-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.overview-project-totals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.overview-health-stat,
.overview-domain-metric {
    display: grid;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--panel-muted);
    border: 1px solid var(--line);
}

.overview-health-stat strong,
.overview-domain-metric strong {
    line-height: 1.25;
    word-break: break-word;
}

.overview-inline-empty {
    display: grid;
    gap: 10px;
    align-content: start;
}

.overview-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 8px;
}

.overview-ops-grid {
    grid-template-columns: var(--admin-template-balance-columns);
    margin-top: 12px;
}

.overview-trend-list {
    display: grid;
    gap: 8px;
}

.overview-trend-row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    gap: 8px 12px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--panel-muted);
    border: 1px solid var(--line);
}

.overview-trend-row strong,
.overview-trend-total {
    line-height: 1.2;
}

.overview-trend-total {
    color: var(--text-strong);
    font-weight: 700;
}

.overview-trend-bar {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: var(--neutral-soft);
    overflow: hidden;
}

.overview-trend-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
}

.overview-trend-metrics {
    grid-column: 2 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--muted);
    font-size: 0.78rem;
}

.overview-domain-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-top: 12px;
}

.overview-domain-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.overview-domain-metric span {
    color: var(--muted);
}

.overview-summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin-top: 12px;
}

.overview-summary-card-wide {
    grid-column: 1 / -1;
}

.overview-project-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.overview-project-management-grid {
    grid-template-columns: var(--admin-template-balance-columns);
    margin-top: 12px;
}

.scheduler-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    align-items: start;
}

.scheduler-settings-grid .field-block {
    min-width: 0;
}

.scheduler-settings-grid .field-block span {
    font-size: 0.78rem;
    line-height: 1.35;
}

.scheduler-actions-cluster {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 10px;
    flex-wrap: wrap;
}

.scheduler-action-form {
    display: inline-flex;
}

.scheduler-actions-cluster .button,
.scheduler-action-form .button {
    min-width: 180px;
}

.project-detail-hero,
.project-detail-secondary,
.project-detail-events-card {
    display: grid;
    gap: 10px;
}

.project-detail-hero {
    grid-template-columns: var(--admin-template-balance-columns);
    margin-top: 12px;
    align-items: start;
}

.project-detail-primary-card,
.project-copy-card {
    display: grid;
    gap: 12px;
}

.project-detail-primary-head,
.project-copy-card-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.project-detail-statuses,
.project-detail-meta-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.project-detail-keyfacts,
.project-detail-copy-grid,
.project-detail-history-list {
    display: grid;
    gap: 10px;
}

.project-detail-keyfacts {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.project-detail-keyfact,
.project-copy-card,
.project-detail-history-item {
    padding: 12px;
    border-radius: 16px;
    background: var(--panel-muted);
    border: 1px solid var(--line);
}

.project-detail-keyfact {
    display: grid;
    gap: 6px;
}

.project-detail-keyfact span,
.project-detail-meta-list span,
.project-copy-card span,
.project-copy-content,
.project-detail-history-item small {
    color: var(--muted);
}

.project-detail-keyfact strong,
.project-detail-meta-list strong,
.project-copy-card strong,
.project-copy-content,
.project-detail-history-item strong {
    line-height: 1.55;
    word-break: break-word;
}

.project-detail-meta-list > div {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--panel-soft);
    border: 1px solid var(--line);
    min-width: 180px;
}

.project-detail-copy-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.project-copy-card {
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 220px;
}

.project-copy-content {
    min-height: 72px;
    max-height: 120px;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.project-copy-card-actions {
    margin-top: auto;
    display: flex;
    justify-content: flex-end;
}

.project-detail-report-images {
    display: grid;
    gap: 12px;
    padding: 12px;
    border-radius: 16px;
    background: var(--panel-soft);
    border: 1px solid var(--line);
}

.project-detail-report-images-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.project-detail-report-images-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.project-detail-report-images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.project-detail-report-image-item {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 12px;
    border-radius: 16px;
    background: var(--panel-muted);
    border: 1px solid var(--line);
}

.project-detail-report-image-preview {
    display: block;
    width: 96px;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
    background: var(--panel-bg);
    border: 1px solid var(--line);
}

.project-detail-report-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.project-detail-report-image-meta {
    display: grid;
    gap: 4px;
}

.project-detail-report-image-meta strong,
.project-detail-report-image-meta span {
    line-height: 1.45;
    word-break: break-word;
}

.project-detail-report-image-meta span {
    color: var(--muted);
}

.project-detail-report-image-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.project-detail-secondary {
    align-content: start;
    grid-template-columns: var(--admin-template-balance-columns);
}

.project-detail-table td,
.project-detail-table th {
    white-space: nowrap;
}

.overview-project-side {
    display: grid;
    gap: 10px;
    align-content: start;
}

.sync-hero-card {
    display: grid;
    gap: 10px;
}

.sync-summary-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sync-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
}

.sync-action-card {
    display: grid;
    gap: 10px;
    padding: 12px;
    border-radius: 18px;
    background: var(--panel-muted);
    border: 1px solid var(--line);
}

.sync-action-card-primary {
    background:
        linear-gradient(135deg, var(--accent-soft), var(--panel-muted)),
        var(--panel-muted);
}

.sync-action-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.sync-action-head .icon-chip .icon,
.admin-modal-header .icon-chip .icon,
.content-group-header .icon-chip .icon {
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
}

.sync-action-head h3,
.sync-rule-glance strong,
.sync-status-row strong,
.admin-modal-header h2 {
    margin-bottom: 0;
}

.sync-action-head p,
.sync-status-row,
.sync-rule-glance {
    margin-bottom: 0;
}

.sync-rule-glance,
.sync-status-list {
    display: grid;
    gap: 8px;
}

.sync-rule-glance {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.sync-rule-glance > div,
.sync-status-row {
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--panel-muted);
    border: 1px solid var(--line);
}

.sync-status-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.section-note {
    margin: 6px 0 0;
    max-width: 64ch;
    font-size: 0.84rem;
}

.admin-list-filter-shell,
.products-filter-form,
.password-form {
    display: grid;
    gap: 8px;
}

.admin-list-filter-shell {
    display: grid;
    gap: 10px;
}

.admin-list-filter-shell,
.products-filter-form {
    display: grid;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    margin-top: 12px;
    margin-bottom: 10px;
}

.admin-list-filter-shell .admin-filter-primary,
.admin-filter-primary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: end;
    width: 100%;
}

.admin-list-filter-shell .admin-filter-secondary,
.admin-filter-secondary {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    padding: 12px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: var(--panel-muted);
}

.admin-filter-secondary[hidden] {
    display: none;
}

.products-search-field,
.products-per-page-field {
    min-width: 0;
}

.admin-list-filter-shell[data-search-size="narrow"] {
    --admin-filter-search-max: 320px;
}

.admin-list-filter-shell .admin-filter-primary > .field-block,
.admin-filter-primary > .field-block {
    flex: 0 1 var(--admin-filter-field-width);
}

.admin-list-filter-shell .admin-filter-primary > .products-search-field,
.admin-filter-primary > .products-search-field {
    flex: 0 1 var(--admin-filter-search-max);
    min-width: min(100%, 240px);
    max-width: min(100%, var(--admin-filter-search-max));
}

.admin-list-filter-shell .admin-filter-primary > .products-per-page-field,
.admin-filter-primary > .products-per-page-field {
    flex: 0 0 108px;
}

.admin-list-filter-shell .admin-filter-actions,
.admin-filter-actions {
    margin-left: auto;
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: end;
}

.admin-list-filter-shell .admin-filter-actions > .button,
.admin-filter-actions > .button {
    min-width: 110px;
    align-self: end;
    padding-inline: 14px;
}

.admin-list-filter-shell .admin-filter-toggle,
.admin-filter-toggle,
.admin-filter-actions > a.button {
    min-width: 104px;
}

.admin-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
}

.admin-modal[hidden] {
    display: none;
}

.admin-modal-backdrop {
    position: absolute;
    inset: 0;
    background: var(--modal-backdrop);
    backdrop-filter: blur(8px);
}

.admin-modal-dialog {
    position: relative;
    width: min(800px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    margin: 16px auto;
    padding: 14px;
    border-radius: 22px;
    background: var(--modal-bg);
    border: 1px solid var(--line);
    box-shadow: var(--modal-shadow);
    overflow: auto;
}

.admin-modal-dialog-wide {
    width: min(1080px, calc(100vw - 32px));
}

.admin-modal-dialog-compact {
    width: min(640px, calc(100vw - 32px));
}

.admin-modal-dialog-image {
    width: min(620px, calc(100vw - 32px));
}

.admin-modal-dialog-product-edit {
    width: min(980px, calc(100vw - 32px));
}

.admin-modal-header {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 10px;
}

.admin-modal-header .button {
    min-height: 38px;
}

.admin-modal-content {
    display: grid;
    gap: 10px;
}

.settings-modal-grid {
    grid-template-columns: var(--admin-template-balance-columns);
    gap: 12px;
    align-items: start;
}

.credentials-shell {
    display: grid;
    grid-template-columns: var(--admin-template-balance-columns);
    gap: 12px;
    align-items: start;
}

.credentials-main,
.credentials-side {
    display: grid;
    gap: 12px;
}

.token-panel-hero {
    gap: 12px;
}

.password-panel {
    min-height: 100%;
}

.token-status-grid-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.content-form,
.content-stack,
.token-panel,
.password-panel,
.token-form {
    display: grid;
    gap: 10px;
}

.content-group {
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: 18px;
    background: var(--panel-muted);
    border: 1px solid var(--line);
}

.content-group-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.content-group-header > div {
    min-width: 0;
}

.content-group-header h3 {
    margin-bottom: 4px;
}

.content-group-header p {
    margin-bottom: 0;
}

.content-group-header .muted {
    max-width: 64ch;
    line-height: 1.6;
}

.content-group-collapsible {
    overflow: hidden;
}

.content-group-summary {
    list-style: none;
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 2px;
}

.content-group-summary::-webkit-details-marker {
    display: none;
}

.content-group-summary > div {
    min-width: 0;
}

.content-group-toggle {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    margin-left: auto;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(45deg);
    transition: transform 180ms ease, border-color 180ms ease;
}

.content-group-collapsible[open] .content-group-toggle {
    transform: rotate(225deg);
    border-color: var(--accent);
}

.content-group-collapsible .content-grid {
    display: none;
}

.content-group-collapsible[open] .content-grid {
    display: grid;
}

.content-group-intro {
    width: 100%;
}

.content-grid,
.compact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.field-block {
    display: grid;
    gap: 5px;
}

.field-block span {
    color: var(--muted);
    font-size: 0.8rem;
}

.field-block-wide {
    grid-column: 1 / -1;
}

.textarea {
    min-height: 88px;
    padding: 8px 10px;
    resize: vertical;
}

.content-actions {
    display: flex;
    justify-content: flex-end;
}

.content-actions-start {
    justify-content: flex-start;
}

.stack-actions {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.token-status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.token-status-card {
    display: grid;
    gap: 6px;
    padding: 12px;
    border-radius: 16px;
    background: var(--panel-muted);
    border: 1px solid var(--line);
}

.token-status-label {
    color: var(--muted);
    font-size: 0.8rem;
}

.token-status-ok {
    color: var(--success);
}

.token-status-expired {
    color: var(--danger);
}

.token-status-card p {
    margin-bottom: 0;
    color: var(--muted);
    line-height: 1.6;
}

.empty-state {
    padding: 14px;
    border-radius: 16px;
    background: var(--panel-soft);
    border: 1px solid var(--line);
}

.empty-state.compact {
    margin-top: 8px;
}

.empty-state h3 {
    margin-bottom: 8px;
}

.empty-state p {
    margin-bottom: 0;
    color: var(--muted);
}

.run-list {
    display: grid;
    gap: 10px;
}

.run-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--panel-muted);
    border: 1px solid var(--line);
}

.run-item strong {
    display: block;
    margin-bottom: 4px;
}

.run-item p {
    margin-bottom: 0;
    color: var(--muted);
}