/* ============================================================
   工具页面统一版式（tool-layout）
   适用：数据可视化 / 竞品分析等工具子页面
   前缀：.tl-*
   设计参考：competitor_analysis.html
   ============================================================ */

/* ---- 页面标题区 ---- */
.tl-page {
    padding: var(--spacing-lg) 0;
}

/* ---- 4 格特性卡片 ---- */
.tl-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}
.tl-feature-card {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 18px 14px;
    text-align: center;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}
.tl-feature-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--card-accent, var(--primary-color));
    transform: scaleX(0);
    transition: transform 0.3s ease;
}
.tl-feature-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.tl-feature-card:hover::before { transform: scaleX(1); }
.tl-feature-card:nth-child(1) { --card-accent: #7c3aed; }
.tl-feature-card:nth-child(2) { --card-accent: #2563eb; }
.tl-feature-card:nth-child(3) { --card-accent: #059669; }
.tl-feature-card:nth-child(4) { --card-accent: #d97706; }
.tl-feature-icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px; margin-bottom: 10px;
}
.tl-feature-card:nth-child(1) .tl-feature-icon { background: #ede9fe; color: #7c3aed; }
.tl-feature-card:nth-child(2) .tl-feature-icon { background: #dbeafe; color: #2563eb; }
.tl-feature-card:nth-child(3) .tl-feature-icon { background: #d1fae5; color: #059669; }
.tl-feature-card:nth-child(4) .tl-feature-icon { background: #fef3c7; color: #d97706; }
.tl-feature-title { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.tl-feature-desc  { font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; }

/* ---- 步骤条 ---- */
.tl-steps {
    display: flex; align-items: center; justify-content: center;
    gap: 0; margin-bottom: var(--spacing-xl); padding: 16px 0;
    flex-wrap: wrap;
}
.tl-step {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 18px;
    background: white; border: 1px solid var(--border-color);
    border-radius: 999px; font-size: 0.85rem; color: var(--text-muted);
    font-weight: 500; transition: all 0.2s ease;
}
.tl-step.active { background: #6366f1; border-color: #6366f1; color: white; }
.tl-step-num {
    width: 20px; height: 20px; border-radius: 50%;
    background: rgba(0,0,0,0.1);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 700;
}
.tl-step.active .tl-step-num { background: rgba(255,255,255,0.25); }
.tl-step-arrow { color: var(--border-color); font-size: 1.2rem; padding: 0 4px; }

/* ---- 操作区（左右 1:1） ---- */
.tl-action-area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}
@media (max-width: 900px) {
    .tl-action-area { grid-template-columns: 1fr; }
    .tl-features { grid-template-columns: repeat(2, 1fr); }
}
.tl-action-title {
    font-size: 0.95rem; font-weight: 700; color: var(--text-primary);
    margin-bottom: 12px; display: flex; align-items: center; gap: 6px;
}

/* ---- 文件上传 ---- */
.tl-upload-area {
    border: 2px dashed var(--border-color); border-radius: var(--radius-lg);
    padding: 28px 20px; text-align: center; cursor: pointer;
    transition: all 0.2s ease; background: var(--bg-secondary);
    margin-bottom: 14px;
}
.tl-upload-area:hover,
.tl-upload-area.drag-over {
    border-color: #6366f1; background: rgba(99,102,241,0.04);
}
.tl-upload-icon { font-size: 2.2rem; color: var(--text-muted); display: block; margin-bottom: 8px; }
.tl-upload-hint { font-size: 0.78rem; color: var(--text-muted); margin-top: 4px; }
.tl-upload-success { display: flex; align-items: center; gap: 10px; justify-content: center; flex-wrap: wrap; }
.tl-success-icon { font-size: 1.5rem; color: #059669; }
.tl-reupload-btn {
    padding: 4px 12px; border: 1px solid var(--border-color);
    border-radius: var(--radius-sm); background: white; font-size: 0.8rem;
    cursor: pointer; transition: all 0.2s; margin-left: 8px;
}
.tl-reupload-btn:hover { border-color: #6366f1; color: #6366f1; }

/* ---- 列名要求黄条 ---- */
.tl-col-req {
    margin-top: 14px; padding: 10px 13px;
    border-radius: var(--radius-md);
    background: #fffbeb; border: 1px solid #fcd34d;
}
.tl-col-req-title {
    font-size: 0.78rem; font-weight: 700; color: #92400e;
    margin-bottom: 7px; display: flex; align-items: center; gap: 5px;
}
.tl-col-req-list {
    display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.75rem;
}
.tl-col-req-tag {
    display: inline-flex; align-items: center; gap: 4px;
    border-radius: 4px; padding: 3px 8px;
}
.tl-col-req-tag.required { background: #fee2e2; color: #b91c1c; font-weight: 600; }
.tl-col-req-tag.optional { background: #f0fdf4; color: #166534; }

/* ---- 模板下载 / Demo 按钮 ---- */
.tl-demo-btn {
    width: 100%; padding: 9px 14px; border: 1px dashed #6366f1;
    background: transparent; color: #6366f1; border-radius: var(--radius-md);
    font-size: 0.85rem; cursor: pointer; font-weight: 500;
    transition: all 0.2s ease; text-decoration: none;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin-bottom: 12px;
}
.tl-demo-btn:hover { background: #6366f1; color: white; }
.tl-demo-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- 主操作按钮（生成/分析） ---- */
.tl-analyze-btn {
    width: 100%; padding: 12px; border: none;
    background: #6366f1; color: white; border-radius: var(--radius-md);
    font-size: 0.95rem; font-weight: 600; cursor: pointer;
    transition: all 0.2s ease;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.tl-analyze-btn:hover:not(:disabled) { background: #4f46e5; transform: translateY(-1px); }
.tl-analyze-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ---- 示例数据表 ---- */
.tl-sample-wrap { margin-top: 12px; }
.tl-sample-title {
    font-size: 0.78rem; font-weight: 600; color: var(--text-secondary);
    margin-bottom: 6px; display: flex; align-items: center; gap: 5px;
}
.tl-sample-table-wrap { overflow-x: auto; }
.tl-sample-table {
    width: 100%; border-collapse: collapse;
    font-size: 0.75rem; color: var(--text-primary);
}
.tl-sample-table th {
    padding: 4px 8px; border: 1px solid #e5e7eb;
    background: #f3f4f6; font-weight: 600;
    color: var(--text-secondary); white-space: nowrap;
}
.tl-sample-table td {
    padding: 4px 8px; border: 1px solid #e5e7eb; white-space: nowrap;
}
.tl-sample-table tr:nth-child(even) td { background: #fafafa; }
.tl-sample-required {
    font-size: 0.65rem; background: #fee2e2; color: #dc2626;
    border-radius: 3px; padding: 1px 4px; margin-left: 2px;
}
.tl-sample-tip {
    font-size: 0.72rem; color: var(--text-muted); margin: 5px 0 0;
    display: flex; align-items: center; gap: 4px;
}

/* ---- 配置表单（参数/阈值/列选择等） ---- */
.tl-config-section { margin-bottom: 14px; }
.tl-config-label {
    font-size: 0.82rem; font-weight: 600; color: var(--text-secondary);
    margin-bottom: 6px; display: flex; align-items: center; gap: 5px;
}
.tl-config-row {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.tl-config-row > div { display: flex; flex-direction: column; gap: 4px; }
.tl-config-row label {
    font-size: 0.78rem; color: var(--text-muted);
}
.tl-config-row input,
.tl-config-row select,
.tl-input, .tl-select {
    width: 100%; padding: 7px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.85rem; background: white;
    box-sizing: border-box;
}
.tl-help-text {
    font-size: 0.72rem; color: var(--text-muted);
    margin: 4px 0 0; line-height: 1.5;
}

/* ---- 加载态 ---- */
.tl-loading { text-align: center; padding: 24px 0; }
.tl-spinner {
    width: 32px; height: 32px; border: 3px solid var(--border-color);
    border-top-color: #6366f1; border-radius: 50%;
    animation: tlSpin 0.8s linear infinite; margin: 0 auto 10px;
}
@keyframes tlSpin { to { transform: rotate(360deg); } }

/* ---- 结果容器 / 卡片 ---- */
.tl-result-panel {
    background: white; border: 1px solid var(--border-color);
    border-radius: var(--radius-lg); padding: 20px;
    margin-bottom: var(--spacing-lg);
}
.tl-result-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
    gap: 12px; flex-wrap: wrap;
}
.tl-result-title {
    font-size: 0.95rem; font-weight: 700; color: var(--text-primary);
    display: flex; align-items: center; gap: 6px;
}
.tl-result-hint { font-size: 0.78rem; color: var(--text-muted); }

/* ---- 统计卡片（结果区概览） ---- */
.tl-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: var(--spacing-lg);
}
.tl-stat-card {
    display: flex; align-items: center; gap: 12px;
    background: white; border: 1px solid var(--border-color);
    border-radius: var(--radius-lg); padding: 14px 18px;
}
.tl-stat-icon {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; font-size: 18px;
    flex-shrink: 0;
    background: #ede9fe; color: #7c3aed;
}
.tl-stat-label { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 2px; }
.tl-stat-val   { font-size: 1.15rem; font-weight: 700; color: var(--text-primary); }
.tl-stat-sub   { font-size: 0.75rem; color: var(--text-secondary); margin-top: 1px; }