/*
 * @File: home.css
 * @Description: 前台工作台样式，包含顶栏、参数区、风格选项、任务卡片与结果预览
 * @Author: Junwen
 * @Email: 565897782@qq.com
 * @Contact: WeChat:Awoowo
 * @Version: 2.0.0
 * @Date: 2026-09-22
 * @Copyright: Copyright (c) 2026 Junwen All rights reserved.
 */

.home-top {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
}
.home-top-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.home-brand { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; }
.home-brand i { color: var(--brand); }
.home-nav { display: flex; align-items: center; gap: 8px; }

.home-wrap { max-width: 1240px; margin: 0 auto; padding: 22px 24px 60px; }

.home-grid { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 20px; align-items: start; }

.opt-block { margin-bottom: 18px; }
.opt-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-sub);
}
.opt-title i { color: var(--brand); }

.style-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.style-item {
    padding: 10px 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel);
    text-align: center;
    font-size: 12.5px;
    cursor: pointer;
    color: var(--text-sub);
    transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}
.style-item:hover { border-color: var(--brand-line); color: var(--brand); }
.style-item.is-active {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-weight: 600;
}
.style-item i { display: block; font-size: 17px; margin-bottom: 4px; color: var(--brand); }

.switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}
.switch input { display: none; }
.switch-track {
    position: relative;
    width: 42px;
    height: 22px;
    border-radius: 11px;
    background: #D5DDE6;
    transition: background-color .18s ease;
}
.switch-track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform .18s ease;
}
.switch input:checked + .switch-track { background: var(--brand); }
.switch input:checked + .switch-track::after { transform: translateX(20px); }

.task-card {
    margin-bottom: 16px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.task-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--panel-sub);
}
.task-title { font-weight: 600; }
.task-meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-mute); }
.task-body { padding: 18px 20px; min-height: 160px; max-height: 560px; overflow-y: auto; }
.task-body .md-h1 { margin-top: 0; }
.task-caret {
    display: inline-block;
    width: 8px;
    height: 16px;
    margin-left: 2px;
    background: var(--brand);
    vertical-align: text-bottom;
    animation: caret-blink 1s steps(2, start) infinite;
}
@keyframes caret-blink { to { visibility: hidden; } }

.task-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    color: var(--text-mute);
    text-align: center;
}
.task-empty i { font-size: 42px; color: var(--brand-line); margin-bottom: 12px; }

.quota-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    margin-bottom: 14px;
    border: 1px solid var(--brand-line);
    border-radius: var(--radius-sm);
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: 13px;
}

.preview-actions { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }

@media (max-width: 1000px) {
    .home-grid { grid-template-columns: 1fr; }
    .style-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}