/* 星医说 · 内容生产工作台 - 主样式 */

/* 基础变量 */
:root {
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
}

/* 导航栏 */
nav {
    background: var(--pico-card-background-color);
    padding: 1rem;
    margin-bottom: 2rem;
}

nav strong {
    font-size: 1.2rem;
}

/* 卡片网格 */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

/* 文案卡片 */
.copy-card {
    background: var(--pico-card-background-color);
    border: 1px solid var(--pico-card-border-color);
    border-radius: var(--pico-border-radius);
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.copy-card h3 {
    margin-bottom: 1rem;
    color: var(--primary);
}

.copy-card .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.copy-card .tags mark {
    background: var(--pico-insular-background-color);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.875rem;
}

.copy-card footer {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* 表单优化 */
form label {
    margin-bottom: 1rem;
}

form button[type="submit"] {
    width: 100%;
    margin-top: 1rem;
}

/* 状态标签 */
mark.success {
    background: var(--success);
    color: white;
}

mark.warning {
    background: var(--warning);
    color: black;
}

mark.danger {
    background: var(--danger);
    color: white;
}

/* 加载状态 */
[aria-busy="true"] {
    opacity: 0.7;
    cursor: wait;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .grid {
        grid-template-columns: 1fr;
    }
    
    nav ul {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* 任务流程图 */
.workflow-steps {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--pico-card-background-color);
    border-radius: var(--pico-border-radius);
    overflow-x: auto;
}

.workflow-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--pico-insular-background-color);
    border-radius: 4px;
    white-space: nowrap;
}

.workflow-step.done {
    background: var(--success);
    color: white;
}

.workflow-step.running {
    background: var(--warning);
    color: black;
    animation: pulse 1.5s infinite;
}

.workflow-step.failed {
    background: var(--danger);
    color: white;
}

.workflow-arrow {
    color: var(--pico-muted-color);
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}