/* template-center.css —— AI 模板中心（2026-10-13 合并三页） */

/* ---- 卡片网格 ---- */
.tc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.tc-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow .15s ease;
}

.tc-card:hover {
    box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .12);
}

/* 缩略图：占位骨架 + 懒挂 iframe（内部按 1024 宽渲染再缩放，呈现桌面观感） */
.tc-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
    background-size: 200% 100%;
    animation: tc-shimmer 1.4s linear infinite;
    overflow: hidden;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.tc-thumb iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 1024px;
    height: 768px;
    transform-origin: 0 0;
    border: 0;
    pointer-events: none; /* 缩略图只读，点击交给外层“查看效果” */
    background: #fff;
}

.tc-thumb .tc-thumb-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #adb5bd;
    font-size: 2rem;
    background: #f8f9fa;
}

@keyframes tc-shimmer {
    to { background-position-x: -200%; }
}

/* 状态徽章配色 */
.tc-badge {
    font-size: .72rem;
    padding: .28em .6em;
    border-radius: 999px;
    white-space: nowrap;
}
.tc-st-generating, .tc-st-checking, .tc-st-repairing { background: #cff4fc; color: #055160; }
.tc-st-pending_review, .tc-st-draft { background: #fff3cd; color: #664d03; }
.tc-st-saved { background: #d1e7dd; color: #0f5132; }
.tc-st-applied { background: #198754; color: #fff; }
.tc-st-failed { background: #f8d7da; color: #842029; }
.tc-st-cancelled { background: #e9ecef; color: #495057; }
.tc-st-interrupted { background: #ffe5d0; color: #7a3e00; }

.tc-card-body { padding: .8rem .9rem; flex: 1; display: flex; flex-direction: column; gap: .45rem; }
.tc-card-title {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tc-card-meta { font-size: .78rem; color: #6c757d; display: flex; flex-wrap: wrap; gap: .5em; }
.tc-card-actions { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: auto; padding: 0 .9rem .8rem; }
.tc-card-actions .btn { padding: .2rem .55rem; font-size: .8rem; }

/* 错误折叠 */
.tc-error-friendly { font-size: .8rem; color: #842029; }
.tc-error-details details { font-size: .72rem; color: #6c757d; }
.tc-error-details summary { cursor: pointer; color: #0d6efd; }

/* 过期提示 */
.tc-expire-warn {
    font-size: .74rem;
    color: #7a3e00;
    background: #fff3cd;
    border-radius: .35rem;
    padding: .15rem .45rem;
    display: inline-block;
}

/* ---- 生成表单 ---- */
.tc-generate-drawer .form-label { font-weight: 500; font-size: .85rem; }
.tc-advanced summary { cursor: pointer; color: #6c757d; font-size: .85rem; }
.tc-advanced[open] summary { color: #0d6efd; }
.tc-style-option {
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    padding: .35rem .6rem;
    cursor: pointer;
    font-size: .85rem;
    background: #fff;
}
.tc-style-option.active { border-color: #0d6efd; color: #0d6efd; background: #eef5ff; }
.tc-color-dot {
    display: inline-block;
    width: .9em; height: .9em;
    border-radius: 50%;
    margin-right: .35em;
    vertical-align: -0.08em;
    border: 1px solid rgba(0, 0, 0, .15);
}

/* ---- 预览面板（宽抽屉 / 手机全屏） ---- */
.tc-preview-panel {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(74vw, 1120px);
    background: #fff;
    box-shadow: -0.4rem 0 1.2rem rgba(0, 0, 0, .18);
    z-index: 1080;
    display: flex;
    flex-direction: column;
    animation: tc-slide-in .18s ease;
}

@keyframes tc-slide-in {
    from { transform: translateX(3%); opacity: .4; }
    to { transform: none; opacity: 1; }
}

.tc-preview-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
    padding: .5rem .75rem;
    border-bottom: 1px solid #e9ecef;
    background: #f8f9fa;
}
.tc-preview-toolbar .form-select,
.tc-preview-toolbar .form-control { width: auto; font-size: .82rem; padding: .2rem .5rem; }

.tc-preview-stage {
    flex: 1;
    overflow: auto;
    background: #e9ecef;
    display: flex;
    justify-content: center;
}
.tc-preview-stage iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
    transition: width .15s ease;
}
.tc-preview-stage.tc-mobile iframe {
    width: 390px;
    max-width: 100%;
    box-shadow: 0 0 1rem rgba(0, 0, 0, .25);
}

/* NL 修改区（预览旁） */
.tc-modify-box {
    border-top: 1px solid #e9ecef;
    padding: .6rem .75rem;
    background: #fff;
}
.tc-modify-box textarea { font-size: .85rem; }
.tc-rev-item { font-size: .78rem; display: flex; justify-content: space-between; align-items: center; gap: .5rem; }

/* ---- 应用对话框 ---- */
.tc-apply-impact {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: .5rem;
    padding: .75rem;
    font-size: .85rem;
}
.tc-apply-impact ul { margin: .35rem 0 0; padding-left: 1.1rem; }
.tc-apply-impact .tc-rule-note { color: #0f5132; }
.tc-apply-impact .tc-tag-note { color: #6c757d; }

/* ---- 计划面板 ---- */
.tc-plan-row .tc-plan-next { font-size: .78rem; color: #0f5132; }
.tc-plan-runs { font-size: .78rem; }

/* ---- 手机适配 ---- */
@media (max-width: 767.98px) {
    .tc-grid { grid-template-columns: 1fr; }
    .tc-preview-panel { width: 100vw; }
    .tc-preview-toolbar { font-size: .8rem; }
    .tc-preview-stage.tc-mobile iframe { width: 100%; }
}

/* C06：缩略图加载完成后结束骨架动画（保留 tc-thumb 的裁切/比例/禁点击） */
.tc-thumb.is-loaded {
    animation: none;
    background: #fff;
}