/* ============================================================================
 * Mira 觅画 · Workbench Layouts v1
 *
 * 4 个生成 tab（创作/广告/宠物/Pro）的 panel 布局统一规范：
 *   - panel-left  输入区（固定 440px）
 *   - panel-right 进度+预览区（flex 1）
 *   - 卡片化（subtle shadow + 桑皮纸纹理）
 *   - 字号 / 字体 / 间距全部走 token
 *   - 响应式：≤960px 单列堆叠
 *
 * 必须在 tokens.css 之后加载（覆盖 style.css 老定义）。
 * ============================================================================ */

/* ----------------------------------------------------------------------------
 * Panel 容器 — 工作站左右双栏
 * ---------------------------------------------------------------------------- */
.panel-left {
    width: 440px;
    min-width: 440px;
    background: var(--surface-card);
    border-right: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}

.panel-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--surface-base);
    /* 桑皮纸米点纹理 — 微妙增加质感 */
    background-image:
        radial-gradient(circle at 1px 1px, rgba(80,60,40,.04) 1px, transparent 0);
    background-size: 24px 24px;
}

/* ----------------------------------------------------------------------------
 * Panel header
 * ---------------------------------------------------------------------------- */
.panel-header {
    padding: var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
    background: var(--paper-50);
    flex-shrink: 0;
}

.panel-title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.05em;
    margin: 0 0 var(--space-1);
    line-height: var(--leading-tight);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.panel-subtitle {
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: var(--leading-normal);
}

/* ----------------------------------------------------------------------------
 * Panel body (滚动)
 * ---------------------------------------------------------------------------- */
.panel-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-5);
    /* 自定义滚动条 — 印社风 */
    scrollbar-width: thin;
    scrollbar-color: var(--border-default) transparent;
}
.panel-body::-webkit-scrollbar {
    width: 6px;
}
.panel-body::-webkit-scrollbar-track {
    background: transparent;
}
.panel-body::-webkit-scrollbar-thumb {
    background: var(--border-default);
    border-radius: 3px;
}
.panel-body::-webkit-scrollbar-thumb:hover {
    background: var(--accent-line);
}

/* ----------------------------------------------------------------------------
 * Input group (表单)
 * ---------------------------------------------------------------------------- */
.input-group {
    margin-bottom: var(--space-5);
}
.input-group:last-child {
    margin-bottom: 0;
}

.input-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
    font-family: var(--font-display);
}
.input-label .required {
    color: var(--accent-base);
    margin-left: 2px;
}

/* 通用 input / textarea / select 在 panel-body 内 */
.panel-body input[type="text"],
.panel-body input[type="number"],
.panel-body select,
.panel-body textarea {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    background: var(--input-bg);
    color: var(--input-fg);
    font-size: var(--text-sm);
    font-family: var(--font-body);
    line-height: var(--leading-normal);
    transition: border-color var(--motion-fast) var(--ease-out),
                box-shadow var(--motion-fast) var(--ease-out);
}
.panel-body textarea {
    resize: vertical;
    min-height: 80px;
}
.panel-body input:focus,
.panel-body select:focus,
.panel-body textarea:focus {
    outline: none;
    border-color: var(--input-border-focus);
    box-shadow: var(--input-shadow-focus);
}
.panel-body input::placeholder,
.panel-body textarea::placeholder {
    color: var(--input-placeholder);
}

/* ----------------------------------------------------------------------------
 * Progress bar 区域（panel-right 顶部）
 * ---------------------------------------------------------------------------- */
.progress-bar {
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--border-subtle);
    background: var(--surface-card);
    box-shadow: var(--shadow-xs);
    flex-shrink: 0;
}

/* ----------------------------------------------------------------------------
 * Content area 内部容器
 * ---------------------------------------------------------------------------- */
.content-area {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-6);
    scrollbar-width: thin;
    scrollbar-color: var(--border-default) transparent;
}
.content-area::-webkit-scrollbar { width: 8px; }
.content-area::-webkit-scrollbar-thumb {
    background: var(--border-default);
    border-radius: 4px;
}

/* ----------------------------------------------------------------------------
 * Card 卡片 (script-card / video-grid 等容器)
 * ---------------------------------------------------------------------------- */
.script-card,
.character-list,
.scene-list,
.video-grid {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
    box-shadow: var(--card-shadow);
}

.script-card h3,
.script-card h4 {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-3);
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.script-card h3 { font-size: var(--text-xl); }
.script-card h4 { font-size: var(--text-md); color: var(--text-secondary); }

/* ----------------------------------------------------------------------------
 * 视频/角色/场景 grid
 * ---------------------------------------------------------------------------- */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-4);
    padding: var(--space-4);
}

.video-card {
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform var(--motion-base) var(--ease-out),
                box-shadow var(--motion-base) var(--ease-out);
    box-shadow: var(--shadow-xs);
}
.video-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.video-card video {
    width: 100%;
    aspect-ratio: 16/9;
    background: var(--ink-900);
    object-fit: cover;
    display: block;
}
.video-info {
    padding: var(--space-3);
}
.video-title {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
    letter-spacing: 0.02em;
}
.video-status {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-bottom: var(--space-2);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.video-status .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-disabled);
    flex-shrink: 0;
}
.video-status .dot.done {
    background: var(--gold-500);
    box-shadow: 0 0 0 2px var(--gold-100);
}

/* ----------------------------------------------------------------------------
 * Empty state (空状态)
 * ---------------------------------------------------------------------------- */
.empty-icon {
    text-align: center;
    margin-bottom: var(--space-3);
    font-size: 0;
    color: var(--text-disabled);
}
.empty-icon .ico {
    width: 48px;
    height: 48px;
    color: var(--text-disabled);
}

/* ----------------------------------------------------------------------------
 * 响应式 — 窄屏改为单列纵向
 * ---------------------------------------------------------------------------- */
@media (max-width: 960px) {
    .panel-left,
    .panel-right {
        width: 100%;
        min-width: 0;
        border-right: none;
        border-bottom: 1px solid var(--border-subtle);
    }
    .main {
        flex-direction: column;
    }
}

/* ----------------------------------------------------------------------------
 * Pro tab 特殊：3+ 段落卡片网格
 * ---------------------------------------------------------------------------- */
.pro-card-title {
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text-primary);
    padding: var(--space-3) var(--space-4);
    background: var(--paper-50);
    border-bottom: 1px solid var(--border-subtle);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    letter-spacing: 0.04em;
}