/* ═════════════════════════════════════════
   威视界 - 快速创作 / 我的内容 样式
   复用 style.css 中的设计变量
   ═════════════════════════════════════════ */

/* ─── 快速创作容器 ─────────────────────── */
.write-wrap { max-width: 860px; margin: 0 auto; }
.write-head { margin-bottom: 1.25rem; }
.write-head h2 { font-size: 1.35rem; font-weight: 700; margin-bottom: 0.35rem; }
.write-banner {
    display: flex; align-items: center; gap: 0.6rem;
    background: var(--accent-50); border: 1px solid var(--accent-200);
    color: var(--accent-600); border-radius: var(--radius-md);
    padding: 0.6rem 0.9rem; margin-bottom: 1rem; font-size: 0.8125rem;
}
.write-banner strong { display: block; }
.write-banner span { color: var(--text-secondary); font-size: 0.75rem; }

.write-card {
    background: var(--bg-card); border: 1px solid var(--border-light);
    border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow-sm);
}
.write-card .form-group { margin-bottom: 1.1rem; }
.form-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.form-row .form-group { margin-bottom: 1.1rem; }

/* 分段选择器 */
.seg-group { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.platform-group { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.seg-item {
    flex: 1; min-width: 120px; cursor: pointer;
    background: var(--bg-page); border: 1.5px solid var(--border-light);
    border-radius: var(--radius-md); padding: 0.7rem 0.85rem;
    display: flex; flex-direction: column; gap: 0.15rem; align-items: flex-start;
    transition: all var(--duration-fast) var(--ease-out); font-family: inherit;
}
.seg-item:hover { border-color: var(--brand-300); background: var(--brand-50); }
.seg-item.active {
    border-color: var(--brand-500); background: var(--brand-50);
    box-shadow: var(--shadow-brand);
}
.seg-emoji { font-size: 1.1rem; }
.seg-label { font-weight: 600; font-size: 0.875rem; color: var(--text-primary); }
.seg-desc { font-size: 0.7rem; color: var(--text-tertiary); }
.platform-group .seg-item { align-items: center; text-align: center; }
.platform-group .seg-label { margin-top: 0.1rem; }

.write-actions { display: flex; align-items: center; gap: 1rem; margin-top: 0.5rem; flex-wrap: wrap; }
.engine-hint { font-size: 0.75rem; color: var(--text-tertiary); }
.engine-hint.ok { color: var(--success-600); }
.engine-hint.warn { color: var(--warning-600); }

/* ─── 生成结果卡 ─────────────────────── */
.result-card {
    background: var(--bg-card); border: 1px solid var(--border-light);
    border-radius: var(--radius-lg); margin-top: 1.25rem; box-shadow: var(--shadow-md);
    overflow: hidden;
}
.result-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
    padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--border-light);
    background: var(--gray-50);
}
.result-platform {
    display: inline-block; font-size: 0.7rem; font-weight: 600;
    color: var(--brand-600); background: var(--brand-50);
    padding: 0.15rem 0.55rem; border-radius: var(--radius-full); margin-bottom: 0.4rem;
}
.result-title { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); line-height: 1.4; }
.result-tools { display: flex; gap: 0.5rem; flex-shrink: 0; }
.result-body {
    padding: 1.25rem; white-space: pre-wrap; word-break: break-word;
    font-size: 0.9rem; line-height: 1.85; color: var(--text-primary);
    max-height: 60vh; overflow-y: auto;
}

/* ─── 热点 / 详情 改写按钮（渐变胶囊） ─────────────── */
.btn-rewrite {
    display: inline-flex; align-items: center; gap: 0.3rem;
    cursor: pointer; font-family: inherit; font-size: 0.8rem; font-weight: 600;
    color: #fff; white-space: nowrap;
    background: linear-gradient(135deg, var(--brand-500), #7c3aed);
    border: none; border-radius: var(--radius-full);
    padding: 0.38rem 0.85rem;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.25);
    transition: all var(--duration-fast) var(--ease-out);
}
.btn-rewrite:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.38);
    filter: brightness(1.06);
}
.btn-rewrite:active { transform: translateY(0) scale(0.97); }

/* 列表标题点击反馈 */
.mc-card-title { transition: color var(--duration-fast) var(--ease-out); }
.mc-card:hover .mc-card-title { color: var(--brand-600); }

/* ─── 我的内容 ─────────────────────── */
.mc-head {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
    margin-bottom: 1.25rem; flex-wrap: wrap;
}
.mc-head h2 { font-size: 1.35rem; font-weight: 700; margin-bottom: 0.35rem; }
.mc-list { display: flex; flex-direction: column; gap: 0.75rem; }
.mc-card {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    background: var(--bg-card); border: 1px solid var(--border-light);
    border-radius: var(--radius-md); padding: 1rem 1.25rem; cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out); box-shadow: var(--shadow-xs);
}
.mc-card:hover { border-color: var(--brand-300); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.mc-card-title { font-weight: 600; font-size: 0.95rem; color: var(--text-primary); margin-bottom: 0.45rem; }
.mc-card-meta { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; font-size: 0.75rem; color: var(--text-tertiary); }
.mc-badge {
    font-weight: 600; padding: 0.12rem 0.5rem; border-radius: var(--radius-full);
    background: var(--brand-50); color: var(--brand-600); font-size: 0.7rem;
}
.mc-badge.toutiao { background: #e0f2fe; color: #0369a1; }
.mc-badge.gongzhonghao { background: #ecfdf5; color: #059669; }
.mc-badge.baijiahao { background: #fef3c7; color: #b45309; }
.mc-time, .mc-views { color: var(--text-tertiary); }
.mc-card-arrow { font-size: 1.4rem; color: var(--text-tertiary); flex-shrink: 0; }

/* 详情 */
.mc-detail { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 1.75rem; box-shadow: var(--shadow-sm); }
.mc-detail-meta { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; font-size: 0.78rem; color: var(--text-tertiary); margin-bottom: 1rem; }
.mc-detail-title { font-size: 1.5rem; font-weight: 800; color: var(--text-primary); line-height: 1.4; margin-bottom: 1.25rem; }
.mc-detail-body { white-space: pre-wrap; word-break: break-word; font-size: 0.95rem; line-height: 1.95; color: var(--text-primary); }
.mc-detail-actions { display: flex; gap: 0.6rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border-light); }

@media (max-width: 640px) {
    .platform-group { grid-template-columns: repeat(2, 1fr); }
    .form-row { flex-direction: column; gap: 0; }
}

/* ─── SKILL 写作指南面板 ─────────────────── */
.skill-guide {
    background: linear-gradient(135deg, var(--brand-50, #eef2ff), #faf5ff);
    border: 1px solid var(--brand-100, #e0e7ff);
    border-radius: var(--radius-md);
    padding: 0.9rem 1rem;
}
.skill-guide-grid {
    display: grid; grid-template-columns: 1.3fr 1fr; gap: 1rem;
}
.skill-guide-block { min-width: 0; }
.skill-guide-title {
    font-size: 0.8rem; font-weight: 700; color: var(--brand-600, #4f46e5);
    margin-bottom: 0.45rem; letter-spacing: 0.02em;
}
.skill-struct {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 0.35rem;
}
.skill-struct li {
    font-size: 0.8125rem; line-height: 1.55; color: var(--text-primary);
    background: rgba(255,255,255,0.7);
    border-left: 3px solid var(--brand-400, #818cf8);
    padding: 0.35rem 0.6rem; border-radius: 0 6px 6px 0;
    white-space: pre-wrap; word-break: break-word;
}
.skill-tips {
    font-size: 0.8125rem; line-height: 1.7; color: var(--text-secondary);
    background: rgba(255,255,255,0.7); border-radius: var(--radius-sm);
    padding: 0.55rem 0.7rem; margin: 0;
}
.skill-guide-empty {
    font-size: 0.8rem; color: var(--text-tertiary); padding: 0.4rem 0;
}
@media (max-width: 640px) {
    .skill-guide-grid { grid-template-columns: 1fr; }
}

/* ─── 模版库 ─────────────────────────────────── */
.tpl-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.6rem;
}
.tpl-card {
    border: 1.5px solid var(--border-light, #e5e7eb); border-radius: var(--radius-md, 10px);
    padding: 0.7rem 0.8rem; cursor: pointer; background: var(--bg-card, #fff);
    transition: all .15s; display: flex; flex-direction: column; gap: 0.3rem;
}
.tpl-card:hover { border-color: var(--brand-400, #818cf8); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(99,102,241,.12); }
.tpl-card.selected { border-color: var(--brand-500, #6366f1); background: var(--brand-50, #eef2ff); box-shadow: 0 0 0 2px rgba(99,102,241,.2); }
.tpl-card-head { display: flex; align-items: center; gap: 0.4rem; }
.tpl-icon { font-size: 1.2rem; }
.tpl-name { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); }
.tpl-desc { font-size: 0.75rem; color: var(--text-tertiary); line-height: 1.4; min-height: 1.8em; }
.tpl-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.tpl-tag { font-size: 0.65rem; padding: 0.1rem 0.4rem; border-radius: var(--radius-full, 999px); background: var(--accent-50, #fff7ed); color: var(--accent-600, #ea580c); }
.tpl-meta { font-size: 0.7rem; color: var(--text-tertiary); margin-top: auto; }
.tpl-clear { justify-content: center; align-items: center; text-align: center; opacity: .8; }
.tpl-empty { grid-column: 1/-1; font-size: 0.8rem; color: var(--text-tertiary); padding: 0.6rem 0; }

/* 模版库 tab 浏览器 */
.tpl-browser { max-width: 1000px; margin: 0 auto; }
.tpl-browser-head { margin-bottom: 1rem; }
.tpl-browser-head h2 { font-size: 1.3rem; font-weight: 700; margin-bottom: 0.3rem; }
.tpl-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.tpl-filter-btn {
    border: 1px solid var(--border-light, #e5e7eb); background: #fff; color: var(--text-secondary);
    padding: 0.4rem 0.9rem; border-radius: var(--radius-full, 999px); cursor: pointer; font-size: 0.82rem; transition: all .15s;
}
.tpl-filter-btn:hover { border-color: var(--brand-400, #818cf8); }
.tpl-filter-btn.active { background: var(--brand-500, #6366f1); color: #fff; border-color: var(--brand-500, #6366f1); }
.tpl-browser .tpl-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.tpl-preview-card {
    margin-top: 1.2rem; background: var(--bg-card, #fff); border: 1px solid var(--border-light, #e5e7eb);
    border-radius: var(--radius-lg, 14px); padding: 1.2rem;
}
.tpl-preview-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.6rem; }
.tpl-preview-head h3 { font-size: 1.05rem; font-weight: 700; margin: 0; }
.tpl-preview-block { margin-top: 0.9rem; }
.tpl-preview-title { font-size: 0.8rem; font-weight: 700; color: var(--brand-600, #4f46e5); margin-bottom: 0.4rem; }
.tpl-struct { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.tpl-struct li { font-size: 0.82rem; line-height: 1.5; background: var(--brand-50, #eef2ff); padding: 0.35rem 0.6rem; border-radius: 0 6px 6px 0; border-left: 3px solid var(--brand-400, #818cf8); }
.tpl-tips { font-size: 0.82rem; line-height: 1.7; color: var(--text-secondary); background: #f9fafb; padding: 0.55rem 0.7rem; border-radius: 8px; margin: 0; }
@media (max-width: 640px) { .tpl-grid { grid-template-columns: repeat(2, 1fr); } }