/* ============================================================================
   媒体分发平台 设计令牌 — 暖燕麦底 + 点阵纹理 + 底部暖光晕 + 电光蓝强调
   浅色优先；保留 Pico.css 做 classless 骨架，本文件是覆盖视觉层
   ============================================================================ */

/* ── 字体（Geist 系；Geist 未在 Google Fonts 时退 Inter/Hanken Grotesk）── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Hanken+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    /* Pico 基础（保留）*/
    --pico-font-size: 95%;

    /* 中性色阶（Stone 暖石灰 / 燕麦基调）*/
    --bg: #fafaf9;            /* 页面底色 — 暖白燕麦 */
    --surface: #ffffff;       /* 卡片、面板 */
    --surface-2: #f5f4f2;     /* 次级表面 */
    --border: #e8e6e3;        /* 微弱分割 */
    --border-strong: #d4d1cc; /* 明显边框 */
    --text: #1a1a1a;          /* 主文字 */
    --text-2: #555;           /* 次要文字 */
    --text-3: #888;           /* 辅助文字 */
    --text-muted: #aaa;       /* 占位 */

    /* 品牌强调（电光蓝）*/
    --accent: #0080F9;
    --accent-hover: #0066cc;
    --accent-soft: rgba(0, 128, 249, 0.08);
    --accent-border: rgba(0, 128, 249, 0.2);

    /* 状态色（5 心智，P9 状态归一）*/
    --s-processing: #0080F9;  /* 处理中 */
    --s-draft: #6B7280;       /* 待定稿 */
    --s-review: #FF9F43;      /* 待审核 */
    --s-published: #10B981;   /* 已发布 */
    --s-failed: #EF4444;      /* 失败 */

    /* 圆角（功能 6-8px，主 CTA 胶囊 999px）*/
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-pill: 999px;

    /* 阴影（以环为主，克制）*/
    --sh-sm: 0 1px 2px rgba(0,0,0,0.04);
    --sh-md: 0 4px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);

    /* 字体 */
    --font-display: 'Hanken Grotesk', 'Inter', -apple-system, sans-serif;
    --font-body: 'Inter', -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', monospace;
}

/* ── 底层：暖燕麦底 + 点阵纹理 + 底部暖光晕（氛围层）── */
body {
    background: var(--bg);
    font-family: var(--font-body);
    color: var(--text);
    position: relative;
}
body::before {                       /* 点阵纹理：1px 点，20px 间距 */
    content: '';
    position: fixed; inset: 0;
    background-image: radial-gradient(circle, rgba(0,0,0,0.015) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none; z-index: 0;
}
body::after {                        /* 底部暖色光晕：地面漫反射 */
    content: '';
    position: fixed; inset: 0;
    background:
        radial-gradient(ellipse at top, rgba(255,159,67,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at top right, rgba(0,128,249,0.04) 0%, transparent 60%);
    pointer-events: none; z-index: 0;
}
main, nav.panel-nav { position: relative; z-index: 1; }

/* ── 玻璃态导航 ── */
nav.panel-nav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(28, 25, 23, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 1rem;
}
nav.panel-nav a { margin-right: 1rem; color: var(--text-2); }
nav.panel-nav a:hover { color: var(--accent); }
nav.panel-nav .brand-logo {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
}
nav.panel-nav .brand-logo .logo-mark {
    width: 28px; height: 28px; border-radius: var(--r-md);
    background: linear-gradient(135deg, var(--accent), #0052cc);
    color: #fff; display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px;
}
nav.panel-nav .brand-name-stack { display: flex; flex-direction: column; line-height: 1.15; }
nav.panel-nav .brand-name { font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; }
nav.panel-nav .brand-sub { font-size: 0.72rem; color: var(--text-3); font-weight: 400; }

/* 导航下拉（管理▾ / 用户▾，原生 <details> 无 JS）*/
.nav-dropdown { position: relative; display: inline-block; }
.nav-dropdown > summary {
    list-style: none; cursor: pointer; color: var(--text-2);
    font-size: 0.9em; padding: 4px 0; margin-right: 1rem;
}
.nav-dropdown > summary::-webkit-details-marker { display: none; }
.nav-dropdown > summary::after { content: " ▾"; font-size: 0.8em; color: var(--text-3); }
.nav-dropdown[open] > summary::after { content: " ▴"; }
.nav-dropdown-menu {
    position: absolute; left: 0; top: calc(100% + 4px);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-md); box-shadow: var(--sh-md);
    padding: 6px; min-width: 140px; z-index: 100;
}
.nav-dropdown-right { left: auto; right: 0; }
.nav-dropdown-menu form { margin: 0; }
.nav-dropdown-menu a,
.nav-dropdown-menu button.link-btn {
    display: block; padding: 6px 12px; border-radius: var(--r-sm);
    font-size: 0.85em; color: var(--text-2); margin-right: 0; white-space: nowrap;
}
.nav-dropdown-menu button.link-btn {
    background: transparent; border: 0; width: 100%; text-align: left;
    font-family: inherit; font-weight: inherit; cursor: pointer;
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu button.link-btn:hover { background: var(--surface-2); color: var(--accent); }

/* ── 按钮（覆盖 Pico role=button 视觉）── */
.btn-primary, .btn-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: var(--r-pill);
    font-size: 13px; font-weight: 500; cursor: pointer;
    background: var(--accent); color: #fff; border: 1px solid transparent;
    text-decoration: none; transition: all 0.15s; font-family: var(--font-body);
    white-space: nowrap;
}
.btn-primary:hover, .btn-pill:hover { background: var(--accent-hover); }
.btn-ghost {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: var(--r-md);
    font-size: 13px; font-weight: 500; cursor: pointer;
    background: transparent; color: var(--text-2);
    border: 1px solid var(--border); text-decoration: none; transition: all 0.15s;
    white-space: nowrap;
}
.btn-ghost:hover { background: var(--surface-2); border-color: var(--border-strong); }
.btn-sm { padding: 4px 10px; font-size: 11px; }

/* ── 状态徽章（5 心智，P9；复用现有 .status-* class，重映射色值）
   底层 9 技术状态 → 5 心智展示，状态机不动 ── */
.status-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 10px; border-radius: var(--r-pill);
    font-size: 0.78em; font-weight: 600;
}
/* 处理中：draft/rewriting/rewritten/pending_publish/preparing/generating_images */
.status-draft, .status-rewriting, .status-rewritten,
.status-pending_publish, .status-preparing, .status-generating_images {
    background: var(--accent-soft); color: var(--accent);
}
.status-pending_review { background: rgba(255,159,67,0.12); color: #cc7a1a; }  /* 待审核 */
.status-published { background: rgba(16,185,129,0.12); color: #059669; }        /* 已发布 */
.status-failed { background: rgba(239,68,68,0.12); color: var(--s-failed); }    /* 失败 */

/* 状态点（实心圆，P5 任务行用）*/
.status-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot-processing { background: var(--s-processing); }
.dot-draft { background: var(--s-draft); }
.dot-review { background: var(--s-review); }
.dot-published { background: var(--s-published); }
.dot-failed { background: var(--s-failed); }

/* ── 平台标签（保留现有 .platform-* 配色）── */
.platform-tag {
    display: inline-block; padding: 1px 8px; border-radius: var(--r-sm);
    font-size: 0.75em; background: var(--surface-2); color: var(--text-2);
}
.platform-xiaohongshu { background: #ffeaea; color: #d32f2f; }
.platform-wechat { background: #e8f5e9; color: #2e7d32; }
.platform-toutiao { background: #fff3e0; color: #e65100; }

/* ── 卡片 ── */
.card-pw {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: 20px;
    box-shadow: var(--sh-sm); transition: all 0.15s;
}
.card-pw:hover { box-shadow: var(--sh-md); border-color: var(--border-strong); }
.card-pw.clickable { cursor: pointer; }
.card-pw.clickable:hover { border-color: var(--accent-border); }

/* 指标卡（首页数据概览用）*/
.metric-value {
    font-family: var(--font-display); font-size: 28px; font-weight: 700;
    letter-spacing: -0.02em; color: var(--text); line-height: 1.1;
}
.metric-label {
    font-size: 11px; color: var(--text-3);
    text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px;
}

/* 会话/进行中脉冲点（P5 session-dot）*/
.pulse-dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
    0%,100% { box-shadow: 0 0 0 3px rgba(0,128,249,0.08); }
    50% { box-shadow: 0 0 0 5px rgba(0,128,249,0.12); }
}

/* ── 从 base.html 移入的功能性样式 ── */
.title-option { cursor: pointer; }
.title-option:hover { background: var(--surface-2); }
.spinner {
    display: inline-block; width: 14px; height: 14px;
    border: 2px solid var(--border-strong); border-top-color: var(--accent);
    border-radius: 50%; animation: spin 0.8s linear infinite;
    vertical-align: middle; margin-left: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }
pre.body-preview {
    white-space: pre-wrap; word-wrap: break-word;
    background: var(--surface); padding: 1rem; border-radius: var(--r-md);
    max-height: 400px; overflow-y: auto; border: 1px solid var(--border);
}

/* ── 工具类 ── */
.font-display { font-family: var(--font-display); }
.font-mono { font-family: var(--font-mono); }
.text-2 { color: var(--text-2); }
.text-3 { color: var(--text-3); }

/* ── Modal（原生 <dialog>，账号表单弹窗用）── */
dialog.modal-dialog {
    border: none; border-radius: var(--r-lg); padding: 0;
    box-shadow: 0 12px 32px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.06);
    max-width: 480px; width: 92vw; background: var(--surface); color: var(--text);
    animation: modal-in 0.15s ease;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
dialog.modal-dialog::backdrop {
    background: rgba(28, 25, 23, 0.4);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
dialog.modal-dialog .modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 20px; border-bottom: 1px solid var(--border);
}
dialog.modal-dialog .modal-title { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
dialog.modal-dialog .modal-close {
    background: none; border: none; font-size: 22px; cursor: pointer;
    color: var(--text-3); padding: 0 4px; line-height: 1;
}
dialog.modal-dialog .modal-close:hover { color: var(--text); }
dialog.modal-dialog .modal-body { padding: 18px 20px; }