/* ============================================================
   template-detail.css — Template Detail 页独立样式
   不依赖 home.css / web.css，仅复用 fx.css 基础重置
   ============================================================ */

/* ── CSS Variables (继承 template.css 体系并扩展) ── */
:root {
    --td-primary: #ff6101;
    --td-primary-light: #ff8a3d;
    --td-primary-dark: #e05500;
    --td-accent: #6366f1;
    --td-accent-light: #818cf8;
    --td-bg: #f8f9fc;
    --td-surface: #ffffff;
    --td-text: #1a1a2e;
    --td-text-secondary: #6b7280;
    --td-text-muted: #9ca3af;
    --td-border: #eef0f4;
    --td-radius: 16px;
    --td-radius-sm: 10px;
    --td-radius-xs: 6px;
    --td-shadow: 0 1px 8px rgba(0,0,0,.04);
    --td-shadow-md: 0 4px 20px rgba(0,0,0,.06);
    --td-max-width: 1080px;
}

/* ── Header (复用template.css的tpl-header，但微调) ── */

/* ── Breadcrumb ── */
.td-breadcrumb {
    max-width: var(--td-max-width); margin: 0 auto;
    padding: 80px 24px 0; display: flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--td-text-muted);
}
.td-breadcrumb a { color: var(--td-text-muted); text-decoration: none; transition: color .15s; }
.td-breadcrumb a:hover { color: var(--td-primary); }
.td-breadcrumb .sep { color: #d1d5db; }
.td-breadcrumb .current { color: var(--td-text); font-weight: 500; }

/* ── Hero Section ── */
.td-hero {
    max-width: var(--td-max-width); margin: 0 auto;
    padding: 32px 24px 40px; display: flex; gap: 48px; align-items: flex-start;
}
.td-hero-main { flex: 1; min-width: 0; }
.td-hero-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,97,1,.08); border: 1px solid rgba(255,97,1,.18);
    border-radius: 20px; padding: 4px 14px; font-size: 12px;
    font-weight: 600; color: var(--td-primary); letter-spacing: .03em;
    text-transform: uppercase; margin-bottom: 14px;
}
.td-hero h1 {
    font-size: 36px; font-weight: 800; color: var(--td-text);
    line-height: 1.2; margin: 0 0 14px; letter-spacing: -.3px;
}
.td-hero-desc {
    font-size: 16px; color: var(--td-text-secondary); line-height: 1.75; margin: 0 0 24px; max-width: 600px;
}
.td-hero-meta { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.td-meta-item {
    display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--td-text-secondary);
}
.td-meta-item svg { width: 16px; height: 16px; color: var(--td-text-muted); }
.td-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.td-btn-primary {
    min-width: 48px;
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--td-primary); color: #fff; border-radius: var(--td-radius-sm);
    padding: 12px 28px; font-size: 15px; font-weight: 600; text-decoration: none;
    border: none; cursor: pointer; transition: background .2s, transform .15s;
}
.td-btn-primary:hover { background: var(--td-primary-dark); transform: translateY(-1px); }
.td-btn-secondary {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--td-surface); color: var(--td-text); border-radius: var(--td-radius-sm);
    padding: 12px 28px; font-size: 15px; font-weight: 600; text-decoration: none;
    border: 1px solid var(--td-border); cursor: pointer; transition: all .2s;
}
.td-btn-secondary:hover { border-color: var(--td-primary); color: var(--td-primary); }

/* ── Hero Side Card (雷达图预览) ── */
.td-hero-side {
    width: 340px; flex-shrink: 0; position: sticky; top: 80px;
}
.td-preview-card {
    background: var(--td-surface); border-radius: var(--td-radius);
    border: 1px solid var(--td-border); overflow: hidden;
    box-shadow: var(--td-shadow-md);
}
.td-preview-card-bar {
    height: 36px; background: #f3f4f6; display: flex; align-items: center;
    padding: 0 14px; gap: 6px; border-bottom: 1px solid var(--td-border);
}
.td-preview-card-dot {
    width: 10px; height: 10px; border-radius: 50%; background: #d1d5db;
}
.td-preview-card-dot:nth-child(1) { background: #fca5a5; }
.td-preview-card-dot:nth-child(2) { background: #fde68a; }
.td-preview-card-dot:nth-child(3) { background: #86efac; }
.td-radar-wrap {
    padding: 24px 20px 20px; display: flex; flex-direction: column; align-items: center;
}
.td-radar-title {
    font-size: 12px; font-weight: 600; color: var(--td-text-muted);
    text-transform: uppercase; letter-spacing: .04em; margin-bottom: 14px;
}
.td-radar-svg { width: 100%; max-width: 260px; height: auto; }
.td-radar-score-row {
    display: flex; align-items: baseline; gap: 6px; margin-top: 16px;
}
.td-radar-score {
    font-size: 32px; font-weight: 800;
    background: linear-gradient(135deg, var(--td-primary), var(--td-primary-light));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.td-radar-score-max { font-size: 14px; color: var(--td-text-muted); font-weight: 500; }
.td-radar-label { font-size: 11px; color: var(--td-text-muted); margin-top: 2px; }

/* ── Section 通用 (复用于 How It Works / FAQ / SEO) ── */
.td-section {
    max-width: var(--td-max-width); margin: 0 auto;
    padding: 48px 24px;
}
.td-section-header {
    display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.td-section-icon {
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; background: rgba(255,97,1,.08);
}
.td-section-title {
    font-size: 22px; font-weight: 700; color: var(--td-text); margin: 0;
}
.td-section-subtitle {
    font-size: 15px; color: var(--td-text-secondary); margin: 0 0 28px;
}

/* ── Radar Card Legend (维度图例，整合进雷达图卡片) ── */
.td-radar-legend {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 16px;
    padding: 12px 20px 16px; border-top: 1px solid var(--td-border);
    background: #fafafa;
}
.td-radar-legend-item {
    display: flex; align-items: center; gap: 6px; font-size: 11px;
}
.td-radar-legend-dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--td-primary); flex-shrink: 0;
}
.td-radar-legend-name { color: var(--td-text); font-weight: 600; }

/* ── Interactive Preview Tabs ── */
.td-tabs-section {
    max-width: var(--td-max-width); margin: 0 auto;
    padding: 0 24px 48px;
}
.td-tabs-bar {
    display: flex; gap: 4px; background: #f3f4f6; border-radius: var(--td-radius-sm);
    padding: 4px; margin-bottom: 20px;
}
.td-tab-btn {
    flex: 1; padding: 12px 16px; border-radius: 8px; border: none;
    background: transparent; font-size: 14px; font-weight: 600;
    color: var(--td-text-secondary); cursor: pointer; transition: all .2s;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.td-tab-btn:hover { color: var(--td-text); }
.td-tab-btn.active {
    background: var(--td-surface); color: var(--td-primary);
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.td-tab-btn svg { width: 18px; height: 18px; }

.td-tab-panel { display: none; }
.td-tab-panel.active { display: block; }

/* iframe 容器 */
.td-iframe-wrap {
    background: var(--td-surface); border-radius: var(--td-radius);
    border: 1px solid var(--td-border); overflow: hidden;
    box-shadow: var(--td-shadow-md);
}
.td-iframe-bar {
    height: 40px; background: #f9fafb; display: flex; align-items: center;
    padding: 0 16px; gap: 6px; border-bottom: 1px solid var(--td-border);
}
.td-iframe-dot {
    width: 10px; height: 10px; border-radius: 50%; background: #d1d5db;
}
.td-iframe-dot:nth-child(1) { background: #fca5a5; }
.td-iframe-dot:nth-child(2) { background: #fde68a; }
.td-iframe-dot:nth-child(3) { background: #86efac; }
.td-iframe-url {
    margin-left: 10px; background: #fff; border: 1px solid #e5e7eb;
    border-radius: 6px; padding: 4px 12px; font-size: 12px; color: #9ca3af;
    flex: 1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.td-iframe-body {
    width: 100%; height: 640px; position: relative; background: #f9fafb;
}
.td-iframe-body iframe {
    width: 100%; height: 100%; border: none;
}
/* iframe loading placeholder */
.td-iframe-loading {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 12px;
    background: linear-gradient(135deg, #f9fafb, #f3f4f6);
    transition: opacity .3s;
}
.td-iframe-loading.hidden { opacity: 0; pointer-events: none; }
.td-iframe-spinner {
    width: 36px; height: 36px; border: 3px solid #e5e7eb;
    border-top-color: var(--td-primary); border-radius: 50%;
    animation: td-spin .8s linear infinite;
}
@keyframes td-spin {
    to { transform: rotate(360deg); }
}
.td-iframe-loading-text { font-size: 13px; color: var(--td-text-muted); }

/* Tab提示文字 */
.td-tab-hint {
    display: flex; align-items: center; gap: 8px; padding: 12px 0;
    font-size: 13px; color: var(--td-text-muted);
}
.td-tab-hint svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ── How It Works ── */
.td-how-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.td-how-card {
    background: var(--td-surface); border-radius: var(--td-radius-sm);
    border: 1px solid var(--td-border); padding: 24px 20px; text-align: center;
}
.td-how-step {
    width: 36px; height: 36px; border-radius: 50%; margin: 0 auto 14px;
    background: linear-gradient(135deg, var(--td-primary), var(--td-primary-light));
    color: #fff; font-size: 16px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.td-how-card h3 { font-size: 15px; font-weight: 700; color: var(--td-text); margin: 0 0 8px; }
.td-how-card p { font-size: 13px; color: var(--td-text-secondary); line-height: 1.65; margin: 0; }

/* ── FAQ Section ── */
.td-faq-list { display: flex; flex-direction: column; gap: 12px; }
.td-faq-item {
    background: var(--td-surface); border-radius: var(--td-radius-sm);
    border: 1px solid var(--td-border); overflow: hidden;
}
.td-faq-q {
    padding: 18px 22px; font-size: 15px; font-weight: 600; color: var(--td-text);
    cursor: pointer; display: flex; justify-content: space-between; align-items: center;
    transition: color .15s;
}
.td-faq-q:hover { color: var(--td-primary); }
.td-faq-q svg { width: 18px; height: 18px; color: var(--td-text-muted); transition: transform .25s; flex-shrink: 0; }
.td-faq-item.open .td-faq-q svg { transform: rotate(180deg); }
.td-faq-a {
    max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s ease;
    font-size: 14px; color: var(--td-text-secondary); line-height: 1.75;
}
.td-faq-item.open .td-faq-a { max-height: 300px; padding: 0 22px 18px; }

/* ── CTA Banner ── */
.td-cta-banner {
    max-width: var(--td-max-width); margin: 0 auto;
    background: linear-gradient(135deg, #1a1a2e, #2d2b55);
    border-radius: 20px; padding: 48px 40px; text-align: center;
    color: white;
    box-sizing: border-box;
}
.td-cta-banner h2 { font-size: 26px; font-weight: 700; margin: 0 0 12px; }
.td-cta-banner p { font-size: 15px; opacity: .8; max-width: 480px; margin: 0 auto 24px; line-height: 1.65; }
.td-cta-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--td-primary); color: #fff; border-radius: var(--td-radius-sm);
    padding: 14px 32px; font-size: 16px; font-weight: 600; text-decoration: none;
    transition: background .2s, transform .15s;
}
.td-cta-btn:hover { background: var(--td-primary-dark); transform: translateY(-1px); }

/* ── Button Disabled & Loading Spin ── */
.td-btn-primary:disabled,
.td-cta-btn:disabled {
    opacity: .65;
    cursor: not-allowed;
    transform: none !important;
}
.td-spin {
    animation: td-spin .8s linear infinite;
}

/* ── Footer (复用 template.css 的 tpl-footer) ── */

/* ── Responsive ── */
@media screen and (max-width: 860px) {
    .td-hero { flex-direction: column; gap: 24px; }
    .td-hero-side { width: 100%; position: static; }
    .td-how-grid { grid-template-columns: 1fr; }
    .td-hero h1 { font-size: 28px; }
}
@media screen and (max-width: 560px) {
    .td-hero h1 { font-size: 24px; }
    .td-hero { padding: 20px 16px 28px; }
    .td-section { padding: 32px 16px; }
    .td-tabs-section { padding: 0 16px 32px; }
    .td-iframe-body { height: 480px; }
    .td-cta-banner { padding: 32px 20px; margin-left: 16px; margin-right: 16px; }
    .td-tab-btn { font-size: 13px; padding: 10px 8px; }
}