/* 威视界 - 新功能模块样式（分享软文 / 直播精灵 / 威视剪辑 / 个人中心） */

.feature-hero {
    display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem;
}
.feature-hero-icon {
    width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #eef2ff, #ede9fe); color: var(--brand-600); flex-shrink: 0;
}
.feature-hero h2 { font-size: 1.35rem; font-weight: 700; margin: 0; }
.feature-hero p { color: var(--text-secondary); font-size: 0.875rem; margin: 0.15rem 0 0; }

/* 通用表单卡片 */
.card {
    background: var(--bg-card); border: 1px solid var(--border-light);
    border-radius: var(--radius-lg); padding: 1.25rem;
}
.card + .card { margin-top: 1rem; }

/* ─── AI 推荐关键词 ──────────────────────── */
.ai-suggest-wrap { display: flex; gap: 0.5rem; align-items: flex-start; margin-top: 0.5rem; }
.ai-suggest-btn {
    flex-shrink: 0; white-space: nowrap;
}
.suggest-result {
    margin-top: 0.75rem; padding: 0.85rem 1rem; border-radius: var(--radius); 
    background: var(--brand-50, #eef2ff); border: 1px dashed var(--brand-300, #c7d2fe);
    font-size: 0.8125rem;
}
.suggest-result h5 { margin: 0 0 0.4rem; font-size: 0.8125rem; color: var(--brand-600); }
.tag-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tag-chip {
    background: #fff; border: 1px solid var(--border-light); border-radius: 999px;
    padding: 0.2rem 0.65rem; font-size: 0.75rem; cursor: pointer; color: var(--text-secondary);
    transition: all .15s;
}
.tag-chip:hover { border-color: var(--brand-400, #818cf8); color: var(--brand-600); }
.suggest-empty { color: var(--text-tertiary); font-size: 0.8125rem; }

/* ─── 直播精灵 ──────────────────────────── */
.live-grid { display: grid; grid-template-columns: 380px 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 880px) { .live-grid { grid-template-columns: 1fr; } }
.live-result pre {
    white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: 0.9rem;
    line-height: 1.7; background: var(--gray-50, #f8fafc); border-radius: var(--radius); padding: 1rem;
    max-height: 420px; overflow: auto; margin: 0;
}
.compliance-box { margin-top: 0.75rem; }
.compliance-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
.compliance-bad {
    background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; border-radius: 6px;
    padding: 0.15rem 0.5rem; font-size: 0.75rem;
}
.compliance-ok { color: #16a34a; font-size: 0.8125rem; }
.audio-player { margin-top: 0.75rem; width: 100%; }
.voice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.5rem; }
.voice-opt {
    border: 1px solid var(--border-light); border-radius: var(--radius); padding: 0.55rem 0.7rem;
    cursor: pointer; font-size: 0.8125rem; transition: all .15s;
}
.voice-opt.active { border-color: var(--brand-500, #6366f1); background: var(--brand-50, #eef2ff); color: var(--brand-600); }
.voice-opt .v-gender { color: var(--text-tertiary); font-size: 0.72rem; margin-left: 0.3rem; }

/* ─── 威视剪辑 ──────────────────────────── */
.weishi-grid { display: grid; grid-template-columns: 400px 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 880px) { .weishi-grid { grid-template-columns: 1fr; } }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.6rem; margin-top: 0.75rem; }
.media-thumb {
    position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--border-light);
    aspect-ratio: 9/16; background: #000;
}
.media-thumb img, .media-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-thumb .mt-kind {
    position: absolute; top: 4px; left: 4px; background: rgba(0,0,0,.55); color: #fff;
    font-size: 0.65rem; padding: 0.05rem 0.35rem; border-radius: 4px;
}
.media-thumb .mt-del {
    position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border: none; border-radius: 50%;
    background: rgba(0,0,0,.55); color: #fff; cursor: pointer; font-size: 0.8rem; line-height: 1;
}
.seg-timeline { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.75rem; }
.seg-line {
    display: flex; gap: 0.6rem; align-items: baseline; padding: 0.45rem 0.7rem; border-radius: 8px;
    background: var(--gray-50, #f8fafc); font-size: 0.8125rem;
}
.seg-line .seg-idx { color: var(--brand-600); font-weight: 700; flex-shrink: 0; }
.seg-line .seg-sec { color: var(--text-tertiary); flex-shrink: 0; width: 48px; text-align: right; }
.video-preview { width: 100%; border-radius: var(--radius); margin-top: 0.75rem; background: #000; max-height: 460px; }

/* ─── 分享软文广场 ──────────────────────── */
.share-toolbar { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.share-toolbar .search-box { flex: 1; min-width: 200px; }
.share-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.share-card {
    background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg);
    padding: 1.1rem; display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s;
}
.share-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(99,102,241,.10); }
.share-card-title { font-size: 1rem; font-weight: 700; margin: 0 0 0.5rem; }
.share-card-body {
    color: var(--text-secondary); font-size: 0.85rem; line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; flex: 1;
}
.share-card-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 0.85rem; font-size: 0.78rem; color: var(--text-tertiary); }
.share-author { display: flex; align-items: center; gap: 0.4rem; }
.share-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--brand-100, #e0e7ff); color: var(--brand-600); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; }
.like-btn {
    display: inline-flex; align-items: center; gap: 0.3rem; border: 1px solid var(--border-light);
    background: #fff; border-radius: 999px; padding: 0.25rem 0.7rem; cursor: pointer; font-size: 0.78rem; color: var(--text-secondary);
}
.like-btn.liked { color: #ec4899; border-color: #fbcfe8; background: #fdf2f8; }
.platform-pill { font-size: 0.7rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--brand-50,#eef2ff); color: var(--brand-600); }

/* ─── 个人中心 ──────────────────────────── */
.profile-grid { display: grid; grid-template-columns: 320px 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 880px) { .profile-grid { grid-template-columns: 1fr; } }
.profile-id { text-align: center; }
.profile-avatar-lg {
    width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 0.75rem; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--brand-500,#6366f1), var(--brand-600,#4f46e5)); color: #fff; font-size: 2rem; font-weight: 800;
}
.profile-name { font-size: 1.1rem; font-weight: 700; }
.profile-sub { color: var(--text-tertiary); font-size: 0.8rem; margin-top: 0.2rem; }
.recharge-cta { margin-top: 1rem; }
.vip-status {
    margin-top: 1rem; padding: 0.75rem; border-radius: var(--radius); background: linear-gradient(135deg,#fef9c3,#fde68a);
    color: #92400e; font-size: 0.8125rem; text-align: center;
}
.vip-status.normal { background: var(--gray-50,#f8fafc); color: var(--text-secondary); }