:root {
    color-scheme: light;
    font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif;
    color: #172033;
    background: #f4f7fb;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    margin: 0;
}

body {
    min-width: 320px;
    background:
        radial-gradient(circle at 85% 0%, rgba(69, 123, 255, 0.11), transparent 31rem),
        #f4f7fb;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

.app-shell {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.app-header {
    display: flex;
    min-height: 72px;
    align-items: center;
    gap: 2rem;
    padding: 0 5vw;
    border-bottom: 1px solid #e5eaf2;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(14px);
}

.brand {
    display: inline-flex;
    min-width: 260px;
    align-items: center;
    gap: 0.75rem;
}

.brand-mark {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 11px;
    background: #2457d6;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(36, 87, 214, 0.24);
}

.brand strong,
.brand small {
    display: block;
}

.brand strong {
    font-size: 0.95rem;
    letter-spacing: -0.01em;
}

.brand small {
    margin-top: 0.15rem;
    color: #78849a;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.primary-nav {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 0.3rem;
}

.nav-link {
    padding: 0.55rem 0.8rem;
    border-radius: 8px;
    color: #647087;
    font-size: 0.9rem;
    white-space: nowrap;
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-link.active {
    background: #edf2ff;
    color: #2457d6;
    font-weight: 650;
}


.prototype-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.7rem;
    border: 1px solid #cbd8ff;
    border-radius: 999px;
    background: #f2f5ff;
    color: #315bc8;
    font-size: 0.75rem;
    font-weight: 650;
    white-space: nowrap;
}

.app-main {
    width: min(1180px, calc(100% - 3rem));
    flex: 1;
    margin: 0 auto;
    padding: 3.5rem 0 4rem;
}

.hero-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
    gap: 2rem;
    align-items: stretch;
    padding: clamp(2rem, 5vw, 4.5rem);
    overflow: hidden;
    border: 1px solid #dce5f5;
    border-radius: 24px;
    background: linear-gradient(135deg, #fff 0%, #f5f8ff 100%);
    box-shadow: 0 18px 50px rgba(35, 60, 110, 0.08);
}

.eyebrow {
    margin: 0 0 0.9rem;
    color: #4167c9;
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.16em;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1 {
    max-width: 650px;
    margin-bottom: 1.25rem;
    color: #14213d;
    font-size: clamp(2.35rem, 5vw, 4.6rem);
    letter-spacing: -0.055em;
    line-height: 1.02;
}

.hero-description {
    max-width: 640px;
    margin-bottom: 1.5rem;
    color: #66748d;
    font-size: 1.03rem;
    line-height: 1.8;
}

.hero-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: #46617f;
    font-size: 0.88rem;
    font-weight: 600;
}

.status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #36b37e;
    box-shadow: 0 0 0 5px rgba(54, 179, 126, 0.12);
}

.hero-summary {
    display: flex;
    min-height: 230px;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    border-radius: 18px;
    background: #172a55;
    color: #fff;
}

.summary-label,
.summary-note {
    color: #aebfe9;
    font-size: 0.82rem;
}

.hero-summary strong {
    margin: 0.65rem 0;
    font-size: 1.55rem;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.page-intro {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2rem;
}

.page-intro h1 {
    margin-bottom: 1rem;
    font-size: clamp(2.2rem, 5vw, 3.8rem);
}

.page-description {
    max-width: 680px;
    margin-bottom: 0;
    color: #66748d;
    line-height: 1.8;
}

.prototype-action,
.secondary-action {
    border: 0;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font-weight: 700;
}

.prototype-action {
    flex: 0 0 auto;
    background: #dce5fb;
    color: #61739b;
    cursor: not-allowed;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.metric-card {
    display: flex;
    min-height: 150px;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.25rem;
    border: 1px solid #e2e8f1;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 8px 25px rgba(35, 60, 110, 0.04);
}

.metric-label,
.metric-note {
    color: #78859a;
    font-size: 0.82rem;
}

.metric-card strong {
    color: #1f2d4a;
    font-size: 2.25rem;
    letter-spacing: -0.04em;
}

.workspace-panel {
    margin-top: 2rem;
    padding: 1.5rem;
    border: 1px solid #e2e8f1;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 8px 25px rgba(35, 60, 110, 0.04);
}

.empty-state {
    display: grid;
    max-width: 520px;
    margin: 1rem auto 0;
    place-items: center;
    padding: 2.5rem 1rem;
    text-align: center;
}

.empty-state-icon {
    display: grid;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    place-items: center;
    border-radius: 50%;
    background: #e9efff;
    color: #4167c9;
    font-size: 1.8rem;
    font-weight: 400;
}

.empty-state h3 {
    margin-bottom: 0.5rem;
    color: #1f2d4a;
}

.empty-state p {
    margin-bottom: 1.25rem;
    color: #78859a;
    line-height: 1.65;
}

.secondary-action {
    border: 1px solid #cbd8ff;
    background: #f2f5ff;
    color: #315bc8;
    cursor: pointer;
}

.primary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    background: #2457d6;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.primary-action:hover {
    background: #1f4cc0;
}

.danger-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #efcaca;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    background: #fff5f5;
    color: #a23838;
    font-weight: 700;
    cursor: pointer;
}

.primary-action[disabled],
.secondary-action[disabled],
.danger-action[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
}

.status-list {
    display: grid;
    gap: 0.75rem;
}

.status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid #e7ebf3;
    border-radius: 12px;
    background: #fbfcff;
}

.status-row div {
    display: grid;
    gap: 0.3rem;
}

.status-row strong {
    color: #273754;
    font-size: 0.92rem;
}

.status-row span:not(.status-pill) {
    color: #78859a;
    font-size: 0.82rem;
    line-height: 1.5;
}

.status-pill {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 0.35rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 700;
}

.status-pill-muted {
    background: #edf1f7;
    color: #72809a;
}

.status-pill-warning {
    background: #fff1cf;
    color: #896a23;
}
.content-section {
    margin-top: 4.5rem;
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.section-heading h2 {
    margin: 0;
    color: #17233d;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    letter-spacing: -0.04em;
}

.section-note {
    color: #8490a3;
    font-size: 0.82rem;
}

.prototype-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.prototype-card {
    min-height: 190px;
    padding: 1.4rem;
    border: 1px solid #e2e8f1;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 8px 25px rgba(35, 60, 110, 0.04);
}

.card-index {
    display: inline-block;
    margin-bottom: 2.2rem;
    color: #5e80dc;
    font-size: 0.8rem;
    font-weight: 750;
}

.prototype-card h3 {
    margin-bottom: 0.6rem;
    color: #1f2d4a;
    font-size: 1.05rem;
}

.prototype-card p {
    margin-bottom: 0;
    color: #78859a;
    font-size: 0.88rem;
    line-height: 1.65;
}

.notice-panel {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-top: 2rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid #f0dfb2;
    border-radius: 14px;
    background: #fffaf0;
    color: #725d2a;
}

.notice-icon {
    display: grid;
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    place-items: center;
    border-radius: 50%;
    background: #e8b84b;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
}

.notice-panel strong,
.notice-panel p {
    display: block;
}

.notice-panel strong {
    margin-bottom: 0.2rem;
    font-size: 0.9rem;
}

.notice-panel p {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.55;
}

.app-footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 5vw;
    border-top: 1px solid #e5eaf2;
    color: #8a95a7;
    font-size: 0.78rem;
}

#blazor-error-ui {
    display: none;
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    z-index: 1000;
    padding: 0.85rem 1rem;
    border: 1px solid #efb2b2;
    border-radius: 10px;
    background: #fff3f3;
    color: #8b2828;
    box-shadow: 0 8px 30px rgba(74, 28, 28, 0.12);
}

#blazor-error-ui .reload {
    margin-left: 0.75rem;
    color: #b11f1f;
    font-weight: 700;
}

@media (max-width: 900px) {
    .app-header {
        flex-wrap: wrap;
        gap: 0.75rem 1rem;
        padding-top: 0.8rem;
        padding-bottom: 0.8rem;
    }

    .brand {
        min-width: 0;
        flex: 1;
    }

    .primary-nav {
        order: 3;
        width: 100%;
        overflow-x: auto;
    }

    .hero-panel {
        grid-template-columns: 1fr;
    }

    .page-intro {
        align-items: flex-start;
        flex-direction: column;
    }

    .summary-grid {
        grid-template-columns: 1fr;
    }

    .hero-summary {
        min-height: 170px;
    }

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

@media (max-width: 560px) {
    .app-main {
        width: min(100% - 1.5rem, 1180px);
        padding-top: 1.5rem;
    }

    .header-context {
        display: none;
    }

    .hero-panel {
        padding: 1.5rem;
        border-radius: 18px;
    }

    h1 {
        font-size: 2.5rem;
    }

    .section-heading,
    .app-footer,
    .status-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .prototype-grid {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------------
   V3 页面重构：四个领域页共用的展示组件。
   只描述"如何显示已存在的状态值"，不产生任何业务判断。
   ------------------------------------------------------------------ */

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}

.badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.badge-success {
    background: #e6f7ef;
    color: #21744c;
}

.badge-info {
    background: #edf2ff;
    color: #4167c9;
}

.badge-warning {
    background: #fff1cf;
    color: #896a23;
}

.badge-danger {
    background: #fff0f0;
    color: #a33232;
}

.badge-muted {
    background: #edf1f7;
    color: #72809a;
}

.table-scroll {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.data-table th {
    padding: 0.6rem 0.7rem;
    border-bottom: 1px solid #e4e9f1;
    color: #78859a;
    font-size: 0.76rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-align: left;
    white-space: nowrap;
}

.data-table td {
    padding: 0.7rem;
    border-bottom: 1px solid #eef1f6;
    color: #1f2d4a;
    vertical-align: middle;
}

.data-table tbody tr:hover {
    background: #f8fafe;
}

.data-table .mono,
.mono {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.8rem;
    color: #5a6a86;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.85rem;
}

.metric-grid .metric-card {
    min-height: 118px;
    padding: 1rem;
}

.page-status {
    padding: 0.85rem 1rem;
    border: 1px solid #dce5f5;
    border-radius: 12px;
    background: #fff;
    color: #52627d;
    line-height: 1.55;
}

.page-status[data-error="true"] {
    border-color: #efb2b2;
    background: #fff3f3;
    color: #8b2828;
}

.platform-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
    padding: 0.7rem 1rem;
    border: 1px solid #dce5f5;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.75);
    color: #52627d;
    font-size: 0.84rem;
}

.platform-strip[data-mode="config-only"] {
    border-color: #f0dfb2;
    background: #fffaf0;
    color: #725d2a;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
    margin-top: 1rem;
}

.pagination button {
    border: 1px solid #d5deed;
    border-radius: 7px;
    padding: 0.45rem 0.7rem;
    background: #fff;
    color: #4167c9;
    cursor: pointer;
}

.pagination button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.85rem;
}

.form-grid label {
    display: grid;
    gap: 0.35rem;
    color: #53617a;
    font-size: 0.82rem;
    font-weight: 650;
}

.form-grid input:not([type="checkbox"]),
.form-grid select,
.form-grid textarea {
    width: 100%;
    padding: 0.65rem 0.7rem;
    border: 1px solid #d8e1f0;
    border-radius: 8px;
    background: #fff;
    color: #172033;
}

.checkbox-field {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.text-link {
    color: #4167c9;
    font-weight: 650;
}

.text-link:hover {
    text-decoration: underline;
}

.muted {
    color: #78859a;
    font-size: 0.84rem;
}

@media (max-width: 760px) {
    .metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---- 操作确认对话框与操作进度抽屉（清单 §2.2 / §12.1） ---- */

body.drawer-open {
    overflow: hidden;
}

.csm-dialog {
    width: min(560px, calc(100% - 2rem));
    padding: 1.5rem;
    border: 1px solid #dce5f5;
    border-radius: 16px;
    background: #fff;
    color: #1f2d4a;
    box-shadow: 0 24px 60px rgba(23, 42, 85, 0.24);
}

.csm-dialog::backdrop {
    background: rgba(23, 34, 60, 0.42);
}

.csm-dialog h2 {
    margin-bottom: 0.6rem;
    font-size: 1.15rem;
}

.csm-dialog p {
    color: #52627d;
    line-height: 1.7;
}

.csm-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
    margin-top: 1.25rem;
}

/* ---- 应用配置弹窗（P2.4）：共用表单、环境变量脱敏三态 ---- */

.row-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
}

.config-dialog {
    width: min(760px, calc(100% - 2rem));
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
}

.config-dialog .form-grid {
    margin-top: 0.9rem;
    align-items: start;
}

/* 配置弹窗字段：标签行预留统一高度，输入控件横向对齐；说明文字在输入框下方独立换行，
   不参与输入行的拉伸（否则长注释会把同一行的 textbox 挤到不同高度）。 */
.config-dialog .form-grid > label {
    align-content: start;
    align-items: start;
    grid-template-rows: minmax(2.6em, auto) auto auto;
}

.config-dialog .form-grid > label > .muted {
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.config-dialog .notice-panel {
    margin-top: 1rem;
}

.config-dialog [data-config-status] {
    margin-top: 1rem;
    padding: 0.6rem 0.8rem;
    font-size: 0.84rem;
    overflow-wrap: anywhere;
}

.config-env {
    display: grid;
    gap: 0.5rem;
    margin-top: 1.1rem;
}

.config-env h3 {
    margin: 0;
    color: #41506b;
    font-size: 0.92rem;
}

.config-env-title {
    margin: 0.35rem 0 0;
    color: #53617a;
    font-size: 0.82rem;
    font-weight: 650;
}

.config-env table.data-table td:nth-child(3),
.config-env table.data-table th:nth-child(3) {
    width: 4.5rem;
    white-space: nowrap;
}

.config-masked {
    color: #78859a;
}

.env-set-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 0.5rem;
}

.env-set-row input {
    width: 100%;
    padding: 0.55rem 0.6rem;
    border: 1px solid #d8e1f0;
    border-radius: 8px;
    background: #fff;
    color: #172033;
    font-size: 0.84rem;
}

.env-set-row input[data-config-env-set-key] {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

.operation-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1100;
    display: flex;
    width: min(460px, 100%);
    height: 100%;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem;
    overflow-y: auto;
    border-left: 1px solid #dce5f5;
    background: #fff;
    box-shadow: -18px 0 40px rgba(23, 42, 85, 0.16);
}

.operation-drawer[hidden] {
    display: none;
}

.operation-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.operation-drawer-head h2 {
    margin: 0;
    font-size: 1.1rem;
}

.operation-drawer-body {
    display: grid;
    gap: 0.85rem;
    margin: 0.5rem 0;
}

.drawer-message {
    margin: 0;
    padding: 0.7rem 0.85rem;
    border: 1px solid #dce5f5;
    border-radius: 10px;
    background: #f7f9fd;
    color: #52627d;
    font-size: 0.86rem;
    line-height: 1.6;
}

.drawer-message.drawer-error {
    border-color: #efb2b2;
    background: #fff3f3;
    color: #8b2828;
}

.drawer-summary {
    margin: 0;
    color: #52627d;
    font-size: 0.86rem;
    line-height: 1.6;
}

.drawer-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    margin: 0;
}

.drawer-facts div {
    padding: 0.6rem 0.7rem;
    border-radius: 9px;
    background: #f7f9fd;
}

.drawer-facts dt {
    color: #78859a;
    font-size: 0.74rem;
}

.drawer-facts dd {
    margin: 0.25rem 0 0;
    overflow-wrap: anywhere;
    font-size: 0.86rem;
    font-weight: 650;
}

.phase-timeline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.phase-timeline li {
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    background: #edf1f7;
    color: #72809a;
    font-size: 0.72rem;
}

.phase-timeline li.current {
    background: #2457d6;
    color: #fff;
    font-weight: 700;
}

@media (max-width: 560px) {
    .drawer-facts {
        grid-template-columns: 1fr;
    }
}

/* ---- 列表筛选、详情摘要与操作按钮组 ---- */

.filter-form {
    margin-bottom: 1.25rem;
    padding: 1rem;
    border-radius: 12px;
    background: #f7f9fd;
}

.filter-form .form-grid {
    margin-bottom: 0.85rem;
}

.detail-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.7rem;
    margin: 0 0 1rem;
}

.detail-facts div {
    padding: 0.7rem 0.8rem;
    border-radius: 10px;
    background: #f7f9fd;
}

.detail-facts dt {
    color: #77839a;
    font-size: 0.75rem;
    font-weight: 650;
}

.detail-facts dd {
    margin: 0.3rem 0 0;
    overflow-wrap: anywhere;
    font-size: 0.88rem;
    font-weight: 650;
}

.readonly-copy {
    width: 100%;
    padding: 0.45rem 0.55rem;
    border: 1px solid #e2e8f1;
    border-radius: 8px;
    background: #fff;
    color: #1f2d4a;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.82rem;
}

.action-groups {
    display: grid;
    gap: 1.25rem;
}

.action-groups h3 {
    margin: 0 0 0.6rem;
    color: #41506b;
    font-size: 0.9rem;
}

.action-item {
    display: grid;
    gap: 0.3rem;
}

.action-reason {
    max-width: 22rem;
    color: #8a95a7;
    font-size: 0.74rem;
    line-height: 1.5;
}

/* 允许执行时的提示（P5.1：最近事实与本次操作后果，如“文件已更新，启动后生效”）。 */
.action-hint {
    max-width: 22rem;
    color: #5b6b85;
    font-size: 0.74rem;
    line-height: 1.5;
}

/* P5.1 应用列表：13 列下表格按内容取宽、超出交给 .table-scroll 横向滚动；
   生命周期/入口列给出最小宽度，避免长禁用原因被挤成逐字换行。 */
.apps-table {
    width: auto;
    min-width: 100%;
}

.apps-table td.config-state-cell,
.apps-table td.pending-cell {
    min-width: 6.5rem;
}

/* 应用名称单元格内第二行显示名称（P5.1：13 列收成 12 列，操作列不必横向滚动） */
.apps-table .row-subtitle {
    display: block;
    color: #8a95a7;
    font-size: 0.74rem;
    white-space: nowrap;
}

.apps-table td.action-cell,
.apps-table td.entries-cell {
    min-width: 10rem;
    vertical-align: top;
}

.apps-table td.action-cell .action-hint,
.apps-table td.action-cell .action-reason,
.apps-table td.config-state-cell .action-reason {
    max-width: 12rem;
    display: block;
}

.apps-table .row-actions a,
.apps-table .row-actions button,
.apps-table td .badge {
    white-space: nowrap;
}

@media (max-width: 760px) {
    .detail-facts {
        grid-template-columns: 1fr;
    }
}

.issue-list {
    margin: 0.4rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.84rem;
    line-height: 1.7;
}

.issue-list li {
    overflow-wrap: anywhere;
}

.env-field {
    display: grid;
    gap: 0.35rem;
    margin-top: 1rem;
    color: #53617a;
    font-size: 0.82rem;
    font-weight: 650;
}

.env-field textarea {
    width: 100%;
    padding: 0.65rem 0.7rem;
    border: 1px solid #d8e1f0;
    border-radius: 8px;
    background: #fff;
    color: #172033;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

/* P4.3 主动备份入口：文件页提交区最近备份面板、配置弹窗备份区、共用范围弹窗 */
.backup-hint-panel {
    display: grid;
    gap: 0.6rem;
    margin: 0 0 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid #d8e1f0;
    border-radius: 12px;
    background: #f7f9fd;
}

.backup-hint-panel .hero-actions {
    align-items: center;
}

.backup-hint-panel p {
    margin: 0;
}

.config-backup-area {
    display: grid;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e4eaf5;
}

.config-backup-area h3 {
    margin: 0;
    color: #41506b;
    font-size: 0.9rem;
}

.backup-scope {
    display: grid;
    gap: 0.5rem;
    margin: 0.6rem 0 0;
    padding: 0.85rem 1rem;
    border: 1px solid #d8e1f0;
    border-radius: 10px;
}

.backup-scope legend {
    padding: 0 0.4rem;
    color: #41506b;
    font-size: 0.84rem;
    font-weight: 650;
}

[hidden] {
    display: none !important;
}