:root {
            --primary: #6366f1;
            --primary-light: #818cf8;
            --primary-dark: #4f46e5;
            --bg: #f8fafc;
            --card: #ffffff;
            --text: #1e293b;
            --text-secondary: #64748b;
            --border: #e2e8f0;
            --success: #22c55e;
            --warning: #f59e0b;
            --danger: #ef4444;
            --radius: 12px;
            --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
            --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
}
        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
            background: var(--bg);
            color: var(--text);
            line-height: 1.6;
            min-height: 100vh;
        }

        /* 顶部导航 */
        .navbar {
            background: var(--card);
            border-bottom: 1px solid var(--border);
            padding: 0 24px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: var(--shadow);
        }

        .navbar-brand {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 18px;
            font-weight: 700;
            color: var(--text);
        }

        .brand-lockup {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .brand-icon {
            width: 34px;
            height: 34px;
            object-fit: contain;
            display: block;
            flex-shrink: 0;
        }
        .brand-name {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 20px;
            font-weight: 700;
            color: #14181f;
            letter-spacing: 0;
            line-height: 1;
            white-space: nowrap;
        }
        .brand-tag {
            border: 1px solid rgba(122, 90, 24, 0.28);
            color: #7a5a18;
            background: linear-gradient(180deg, #fffaf0 0%, #f6ecd5 100%);
            border-radius: 999px;
            padding: 4px 10px;
            font-size: 12px;
            font-weight: 700;
            line-height: 1;
            white-space: nowrap;
            box-shadow: 0 1px 2px rgba(122, 90, 24, 0.08);
        }

        .navbar-nav { display: flex; gap: 4px; }

        .nav-btn {
            padding: 8px 16px; border: none; background: transparent;
            color: var(--text-secondary); font-size: 14px; font-weight: 500;
            cursor: pointer; border-radius: 8px; transition: all 0.2s;
        }
        .nav-btn:hover { background: var(--bg); color: var(--text); }
        .nav-btn.active { background: var(--primary); color: white; }

        .navbar-actions { display: flex; align-items: center; gap: 8px; }
        .navbar-brand, .navbar-actions { flex-shrink: 0; }
        .navbar-nav { overflow-x: auto; scrollbar-width: none; }
        .navbar-nav::-webkit-scrollbar { display: none; }

        /* 生成按钮组 */
        .gen-btn-group {
            display: flex; gap: 4px; align-items: center;
        }
        .gen-btn-main {
            padding: 8px 16px; border: none; border-radius: 8px;
            font-size: 14px; font-weight: 500; cursor: pointer;
            background: var(--primary); color: white; transition: all 0.2s;
            display: flex; align-items: center; gap: 6px;
        }
        .gen-btn-main:hover { background: var(--primary-dark); }
        .gen-btn-main:disabled { background: var(--text-secondary); cursor: not-allowed; }
        .gen-btn-dropdown {
            padding: 8px 6px; border: none; border-radius: 8px;
            font-size: 14px; cursor: pointer;
            background: var(--primary-dark); color: white; transition: all 0.2s;
        }
        .gen-btn-dropdown:hover { background: #4338ca; }

        .dropdown-menu {
            position: absolute; top: 52px; right: 0;
            background: var(--card); border: 1px solid var(--border);
            border-radius: 8px; box-shadow: var(--shadow-md);
            min-width: 160px; z-index: 200; display: none; overflow: hidden;
        }
        .dropdown-menu.show { display: block; }
        .dropdown-item {
            padding: 10px 16px; font-size: 14px; cursor: pointer;
            display: flex; align-items: center; gap: 8px; transition: background 0.2s;
        }
        .dropdown-item:hover { background: var(--bg); }

        /* 按钮 */
        .btn {
            padding: 8px 16px; border: none; border-radius: 8px;
            font-size: 14px; font-weight: 500; cursor: pointer;
            transition: all 0.2s; display: inline-flex; align-items: center; gap: 6px;
        }
        .btn-primary { background: var(--primary); color: white; }
        .btn-primary:hover { background: var(--primary-dark); }
        .btn-primary:disabled { background: var(--text-secondary); cursor: not-allowed; }
        .btn-outline { background: transparent; color: var(--primary); border: 1px solid var(--primary); }
        .btn-outline:hover { background: var(--primary); color: white; }
        .btn-success { background: var(--success); color: white; }
        .btn-danger { background: var(--danger); color: white; }
        .btn-sm { padding: 4px 10px; font-size: 12px; }
        .btn-ghost { background: transparent; color: var(--text-secondary); padding: 6px 8px; }
        .btn-ghost:hover { background: var(--bg); color: var(--text); }

        /* 主内容 */
        .main-content { max-width: 1200px; margin: 0 auto; padding: 24px; }

        /* 文章卡片 */
        .article-card {
            background: var(--card); border: 1px solid var(--border);
            border-radius: var(--radius); padding: 16px 20px; margin-bottom: 10px;
            display: flex; align-items: center; gap: 16px;
            transition: all 0.2s; box-shadow: var(--shadow);
        }
        .article-card:hover { box-shadow: var(--shadow-md); border-color: var(--primary-light); }
        .article-card.generating { border-color: #f59e0b; background: #fffbeb; }
        .article-card.generating:hover { border-color: #f59e0b; }
        .article-card.failed { border-color: #ef4444; background: #fef2f2; }
        .article-card.failed:hover { border-color: #ef4444; }
        @keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
        .generating-dot { display: inline-block; animation: pulse-dot 1.2s infinite; }

        .article-track-badge {
            flex-shrink: 0; padding: 4px 12px; border-radius: 20px;
            font-size: 12px; font-weight: 600; min-width: 80px; text-align: center;
        }
        .track-感悟赛道 { background: #fce7f3; color: #be185d; }
        .track-情感赛道 { background: #fce7f3; color: #be185d; }
        .track-AI赛道 { background: #dbeafe; color: #1d4ed8; }
        .track-人物赛道 { background: #ede9fe; color: #7c3aed; }
        .track-生活赛道 { background: #dcfce7; color: #16a34a; }
        .track-高校赛道 { background: #fef3c7; color: #b45309; }

        .article-info { flex: 1; min-width: 0; }
        .article-title {
            font-size: 15px; font-weight: 600; margin-bottom: 4px;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .article-summary {
            font-size: 13px; color: var(--text-secondary);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .article-topic-reason {
            font-size: 12px; color: #8b5cf6; margin-top: 4px;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .article-error-reason {
            font-size: 12px; color: #b91c1c; margin-top: 4px;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .article-meta {
            font-size: 12px; color: var(--text-secondary); margin-top: 4px;
            display: flex; gap: 12px;
        }

        .article-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
        .history-log {
            margin-top: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 8px;
            background: #0f172a; color: #e2e8f0; font-size: 12px; line-height: 1.6;
            white-space: pre-wrap; overflow-x: auto; max-height: 220px;
        }
        .status-pill {
            flex-shrink: 0; padding: 4px 10px; border-radius: 20px;
            font-size: 12px; font-weight: 600; min-width: 72px; text-align: center;
        }
        .status-success { background: #dcfce7; color: #15803d; }
        .status-partial { background: #fef3c7; color: #b45309; }
        .status-failed { background: #fee2e2; color: #b91c1c; }

        /* 设置页面 */
        .settings-section { margin-bottom: 24px; }
        .settings-section h3 {
            font-size: 15px; font-weight: 600; margin-bottom: 12px;
            padding-bottom: 8px; border-bottom: 1px solid var(--border);
        }
        .setting-row {
            display: flex; align-items: center; justify-content: space-between;
            padding: 12px 0; border-bottom: 1px solid #f1f5f9;
        }
        .setting-row:last-child { border-bottom: none; }
        .setting-label { font-size: 14px; font-weight: 500; }
        .setting-desc { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

        /* 开关 */
        .toggle { position: relative; width: 44px; height: 24px; cursor: pointer; }
        .toggle input { display: none; }
        .toggle-slider {
            position: absolute; inset: 0; background: #cbd5e1;
            border-radius: 24px; transition: 0.3s;
        }
        .toggle-slider::before {
            content: ''; position: absolute; height: 18px; width: 18px;
            left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: 0.3s;
        }
        .toggle input:checked + .toggle-slider { background: var(--primary); }
        .toggle input:checked + .toggle-slider::before { transform: translateX(20px); }

        /* 数字输入 */
        .number-input { display: flex; align-items: center; gap: 8px; }
        .number-input button {
            width: 28px; height: 28px; border: 1px solid var(--border);
            background: var(--card); border-radius: 6px; cursor: pointer;
            font-size: 16px; display: flex; align-items: center; justify-content: center;
        }
        .number-input button:hover { background: var(--bg); }
        .number-input input {
            width: 40px; text-align: center; border: 1px solid var(--border);
            border-radius: 6px; padding: 4px; font-size: 14px;
        }

        /* 时间输入 */
        .time-input { padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; }

        /* Toast */
        .toast-container { position: fixed; top: 72px; right: 24px; z-index: 1000; }
        .toast {
            background: var(--card); border: 1px solid var(--border); border-radius: 8px;
            padding: 12px 16px; margin-bottom: 8px; box-shadow: var(--shadow-md);
            display: flex; align-items: center; gap: 8px; font-size: 14px;
            animation: slideIn 0.3s ease;
        }
        .toast.success { border-left: 3px solid var(--success); }
        .toast.error { border-left: 3px solid var(--danger); }
        .toast.info { border-left: 3px solid var(--primary); }
        @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

        /* 弹窗 */
        .modal-overlay {
            position: fixed; inset: 0; background: rgba(0,0,0,0.5);
            z-index: 200; display: flex; align-items: center; justify-content: center;
        }
        .modal {
            background: var(--card); border-radius: var(--radius);
            width: 90%; max-width: 800px; max-height: 90vh;
            overflow: hidden; display: flex; flex-direction: column;
        }
        .modal-header {
            padding: 16px 20px; border-bottom: 1px solid var(--border);
            display: flex; align-items: center; justify-content: space-between;
        }
        .modal-body { padding: 20px; overflow-y: auto; flex: 1; }
        .modal-footer {
            padding: 12px 20px; border-top: 1px solid var(--border);
            display: flex; justify-content: flex-end; gap: 8px;
        }

        /* 空状态 */
        .empty-state { text-align: center; padding: 60px 20px; color: var(--text-secondary); }
        .empty-state .icon {
            width: 54px;
            height: 54px;
            margin: 0 auto 12px;
            border-radius: 18px;
            border: 1px solid var(--border);
            background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            font-weight: 700;
            color: #334155;
        }
        .empty-state h3 { font-size: 16px; margin-bottom: 8px; color: var(--text); }
        .empty-state p { font-size: 14px; }

        /* 赛道筛选栏 */
        .filter-bar {
            display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; align-items: center;
        }
        .filter-btn {
            padding: 6px 14px; border: 1px solid var(--border); border-radius: 20px;
            background: var(--card); font-size: 13px; cursor: pointer; transition: all 0.2s;
        }
        .filter-btn:hover { border-color: var(--primary-light); }
        .filter-btn.active { background: var(--primary); color: white; border-color: var(--primary); }

        .card { background: var(--card); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow); overflow: hidden; }
        .card-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
        .card-header h2 { font-size: 16px; font-weight: 600; }
        .card-body { padding: 20px; }
        .auth-screen {
            min-height: 100vh; display: flex; align-items: center; justify-content: center;
            padding: 24px; background: #eef2ff;
        }
        .auth-panel {
            width: 100%; max-width: 400px; background: var(--card); border: 1px solid var(--border);
            border-radius: 8px; box-shadow: var(--shadow-md); padding: 28px;
        }
        .auth-logo { display: flex; justify-content: center; margin-bottom: 14px; }
        .auth-logo .brand-icon { width: 44px; height: 44px; }
        .auth-logo .brand-name { font-size: 28px; }
        .auth-panel h1 { font-size: 22px; margin-bottom: 6px; text-align: center; }
        .auth-panel p { color: var(--text-secondary); font-size: 13px; margin-bottom: 20px; text-align: center; }
        .auth-tabs { display: flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-bottom: 16px; }
        .auth-tab { flex: 1; border: none; background: var(--card); padding: 8px; cursor: pointer; color: var(--text-secondary); }
        .auth-tab.active { background: var(--primary); color: white; }
        .form-field { margin-bottom: 12px; }
        .form-field label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; }
        .form-field input {
            width: 100%; padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px;
        }
        .account-chip { color: var(--text-secondary); font-size: 13px; padding: 0 4px; }
        .api-key-row { display: flex; gap: 8px; align-items: center; }
        .api-key-row input { flex: 1; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; }
        .user-form-grid { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); gap: 10px; align-items: end; }
        .user-form-grid input, .user-form-grid select {
            width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px;
        }
        .user-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f1f5f9; }
        .user-row:last-child { border-bottom: none; }
        .user-row-main { flex: 1; min-width: 0; }
        .user-row-title { font-weight: 600; font-size: 14px; }
        .user-row-meta { color: var(--text-secondary); font-size: 12px; margin-top: 2px; }
        .user-edit-panel { display: none; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: #f8fafc; margin-top: 8px; }
        .user-toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
        .user-toolbar input, .user-toolbar select {
            padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; background: white;
        }
        .user-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
        .user-stat {
            border: 1px solid var(--border); border-radius: 8px; background: #fff;
            padding: 12px 14px; box-shadow: var(--shadow);
        }
        .user-stat .label { font-size: 12px; color: var(--text-secondary); }
        .user-stat .value { font-size: 20px; font-weight: 700; margin-top: 2px; }
        .user-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
        .user-detail-box { border: 1px solid var(--border); border-radius: 8px; background: #f8fafc; padding: 10px 12px; }
        .user-detail-box .label { font-size: 12px; color: var(--text-secondary); }
        .user-detail-box .value { font-size: 14px; font-weight: 600; margin-top: 2px; word-break: break-all; }
        .download-list { display: flex; flex-direction: column; gap: 8px; }
        .download-item { padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: white; }
        .download-item-title { font-size: 14px; font-weight: 600; }
        .download-item-meta { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }
        .quota-ok { color: var(--success); font-weight: 600; }
        .quota-low { color: var(--warning); font-weight: 600; }
        .quota-empty { color: var(--danger); font-weight: 600; }
        .pagination-bar {
            display: flex; align-items: center; justify-content: space-between; gap: 10px;
            padding-top: 12px; color: var(--text-secondary); font-size: 13px;
        }
        .bulk-bar {
            display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
            padding: 10px 12px; margin-bottom: 12px; border: 1px solid var(--border);
            border-radius: 8px; background: #f8fafc;
        }
        .bulk-bar input { padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; width: 90px; }
        .audit-list { display: flex; flex-direction: column; gap: 8px; }
        .audit-item { padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
        .audit-title { font-size: 13px; font-weight: 600; }
        .audit-meta { color: var(--text-secondary); font-size: 12px; margin-top: 3px; }
        .viewer-hero {
            display: grid; grid-template-columns: 1.4fr repeat(3, minmax(120px, 1fr));
            gap: 12px; margin-bottom: 18px;
        }
        .viewer-panel {
            background: #ffffff; border: 1px solid var(--border); border-radius: 8px;
            padding: 16px; box-shadow: var(--shadow);
        }
        .viewer-panel-title { font-size: 13px; color: var(--text-secondary); margin-bottom: 4px; }
        .viewer-panel-value { font-size: 22px; font-weight: 700; color: var(--text); }
        .viewer-track-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
        .viewer-track-chip {
            border: 1px solid var(--border); border-radius: 20px; padding: 4px 10px;
            background: #f8fafc; font-size: 12px; color: var(--text-secondary);
        }
        .download-history-card {
            background: var(--card); border: 1px solid var(--border); border-radius: 8px;
            padding: 14px 16px; margin-bottom: 10px; box-shadow: var(--shadow);
        }
        .workspace-header {
            display: grid;
            grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.95fr);
            gap: 16px;
            margin-bottom: 18px;
        }
        .workspace-intro,
        .workspace-metrics {
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--card);
            box-shadow: var(--shadow);
        }
        .workspace-intro {
            padding: 22px;
        }
        .workspace-kicker {
            color: var(--text-secondary);
            font-size: 13px;
            font-weight: 700;
            margin-bottom: 6px;
        }
        .workspace-title {
            font-size: 26px;
            line-height: 1.25;
            font-weight: 800;
            color: var(--text);
        }
        .workspace-subtitle {
            margin-top: 8px;
            color: var(--text-secondary);
            font-size: 14px;
        }
        .workspace-metrics {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            overflow: hidden;
        }
        .workspace-metric {
            padding: 16px;
            border-right: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
        }
        .workspace-metric:nth-child(2n) {
            border-right: none;
        }
        .workspace-metric:nth-last-child(-n+2) {
            border-bottom: none;
        }
        .workspace-metric .label {
            color: var(--text-secondary);
            font-size: 12px;
            font-weight: 700;
        }
        .workspace-metric .value {
            margin-top: 4px;
            color: var(--text);
            font-size: 24px;
            font-weight: 800;
        }

        /* 视觉刷新：内容生产工作台 */
        :root {
            --primary: #0f766e;
            --primary-light: #14b8a6;
            --primary-dark: #115e59;
            --accent: #c47a1b;
            --bg: #f4f5f0;
            --card: #fffefa;
            --text: #1b2421;
            --text-secondary: #66736e;
            --border: #dfe5dc;
            --success: #15803d;
            --warning: #b7791f;
            --danger: #c2413a;
            --radius: 8px;
            --shadow: 0 1px 2px rgba(27,36,33,0.05), 0 10px 30px rgba(27,36,33,0.04);
            --shadow-md: 0 18px 42px rgba(27,36,33,0.12);
        }
        body {
            background:
                linear-gradient(180deg, rgba(255,254,250,0.92) 0%, rgba(244,245,240,0.96) 240px),
                radial-gradient(circle at 18% 0%, rgba(20,184,166,0.12), transparent 32%),
                var(--bg);
            color: var(--text);
            line-height: 1.55;
        }
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            pointer-events: none;
            background-image:
                linear-gradient(rgba(27,36,33,0.025) 1px, transparent 1px),
                linear-gradient(90deg, rgba(27,36,33,0.018) 1px, transparent 1px);
            background-size: 36px 36px;
            mask-image: linear-gradient(180deg, rgba(0,0,0,0.55), transparent 52%);
        }
        .navbar {
            height: 68px;
            padding: 0 28px;
            background: rgba(255,254,250,0.9);
            border-bottom: 1px solid rgba(111,122,114,0.2);
            box-shadow: none;
            backdrop-filter: blur(18px);
        }
        .brand-icon {
            width: 38px;
            height: 38px;
            border-radius: 10px;
            box-shadow: 0 8px 18px rgba(15,118,110,0.14);
        }
        .brand-name {
            color: #14201d;
            font-size: 21px;
            font-weight: 800;
        }
        .brand-tag {
            border-color: rgba(196,122,27,0.25);
            color: #8a4f0f;
            background: #fff7e8;
            border-radius: 999px;
            box-shadow: none;
        }
        .navbar-nav {
            gap: 6px;
            padding: 6px;
            border: 1px solid rgba(111,122,114,0.16);
            border-radius: 999px;
            background: rgba(255,255,255,0.55);
        }
        .nav-btn {
            min-height: 34px;
            padding: 7px 15px;
            border-radius: 999px;
            color: #68746f;
            font-weight: 650;
        }
        .nav-btn:hover {
            background: rgba(15,118,110,0.08);
            color: var(--primary-dark);
        }
        .nav-btn.active {
            background: #14201d;
            color: #fffefa;
            box-shadow: 0 8px 18px rgba(20,32,29,0.16);
        }
        .navbar-actions {
            gap: 10px;
        }
        .account-chip {
            border: 1px solid rgba(111,122,114,0.18);
            border-radius: 999px;
            background: rgba(255,255,255,0.55);
            padding: 7px 10px;
            color: #5b6863;
        }
        .gen-btn-group {
            gap: 1px;
            border-radius: 999px;
            overflow: hidden;
            box-shadow: 0 10px 24px rgba(15,118,110,0.18);
        }
        .gen-btn-main,
        .gen-btn-dropdown {
            min-height: 38px;
            border-radius: 0;
            background: var(--primary);
            font-weight: 750;
        }
        .gen-btn-main {
            padding: 8px 18px;
        }
        .gen-btn-main::before {
            content: '+';
            font-size: 17px;
            line-height: 1;
        }
        .gen-btn-main:hover,
        .gen-btn-dropdown:hover {
            background: var(--primary-dark);
        }
        .gen-btn-main:disabled {
            background: #8d9994;
        }
        .dropdown-menu {
            top: 56px;
            border-color: rgba(111,122,114,0.2);
            border-radius: 10px;
            box-shadow: var(--shadow-md);
            background: #fffefa;
        }
        .dropdown-item:hover {
            background: #edf8f6;
        }
        .main-content {
            max-width: 1240px;
            padding: 30px 28px 48px;
        }
        .main-content > div {
            position: relative;
        }
        .filter-bar {
            gap: 10px;
            margin-bottom: 18px;
            padding: 4px 0;
        }
        .filter-btn {
            min-height: 34px;
            padding: 7px 14px;
            border-color: rgba(111,122,114,0.22);
            border-radius: 999px;
            background: rgba(255,254,250,0.78);
            color: #56635f;
            font-weight: 650;
            box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
        }
        .filter-btn:hover {
            border-color: rgba(15,118,110,0.36);
            color: var(--primary-dark);
            transform: translateY(-1px);
        }
        .filter-btn.active {
            border-color: #14201d;
            background: #14201d;
            color: #fffefa;
        }
        .article-card {
            position: relative;
            align-items: flex-start;
            gap: 18px;
            margin-bottom: 12px;
            padding: 18px 20px;
            border-color: rgba(111,122,114,0.18);
            border-radius: 8px;
            background: rgba(255,254,250,0.92);
            box-shadow: var(--shadow);
        }
        .article-card::before {
            content: '';
            position: absolute;
            left: 0;
            top: 14px;
            bottom: 14px;
            width: 3px;
            border-radius: 0 4px 4px 0;
            background: var(--primary);
            opacity: 0;
            transition: opacity 0.2s;
        }
        .article-card:hover {
            border-color: rgba(15,118,110,0.32);
            box-shadow: var(--shadow-md);
            transform: translateY(-1px);
        }
        .article-card:hover::before {
            opacity: 1;
        }
        .article-card.generating {
            border-color: rgba(183,121,31,0.34);
            background: #fff9eb;
        }
        .article-card.failed {
            border-color: rgba(194,65,58,0.28);
            background: #fff7f5;
        }
        .article-track-badge,
        .status-pill {
            border-radius: 999px;
            min-width: 76px;
            padding: 5px 11px;
            font-weight: 750;
        }
        .track-感悟赛道,
        .track-情感赛道 { background: #f8e8ee; color: #9f2d58; }
        .track-AI赛道 { background: #e2f4f1; color: #0f766e; }
        .track-人物赛道 { background: #eee9fb; color: #6d4aba; }
        .track-生活赛道 { background: #e6f2df; color: #3f7b2e; }
        .track-高校赛道 { background: #fff0d6; color: #9a5a12; }
        .article-title {
            color: #17211e;
            font-size: 16px;
            font-weight: 760;
            line-height: 1.35;
        }
        .article-summary {
            margin-top: 5px;
            color: #64716c;
        }
        .article-topic-reason {
            color: #0f766e;
        }
        .article-meta {
            margin-top: 7px;
            color: #7a8580;
        }
        .article-actions {
            gap: 7px;
            padding-top: 1px;
        }
        .btn {
            min-height: 36px;
            border-radius: 999px;
            font-weight: 700;
            box-shadow: 0 1px 0 rgba(255,255,255,0.55) inset;
        }
        .btn-sm {
            min-height: 30px;
            padding: 5px 12px;
        }
        .btn-primary {
            background: var(--primary);
            color: #fffefa;
        }
        .btn-primary:hover {
            background: var(--primary-dark);
            transform: translateY(-1px);
        }
        .btn-outline {
            border-color: rgba(15,118,110,0.34);
            background: rgba(255,254,250,0.72);
            color: var(--primary-dark);
        }
        .btn-outline:hover {
            border-color: var(--primary);
            background: #edf8f6;
            color: var(--primary-dark);
        }
        .btn-success {
            background: var(--success);
        }
        .btn-danger {
            background: var(--danger);
        }
        .btn-ghost {
            color: #68746f;
        }
        .btn-ghost:hover {
            background: rgba(15,118,110,0.08);
            color: #14201d;
        }
        .card {
            border-color: rgba(111,122,114,0.18);
            border-radius: 8px;
            background: rgba(255,254,250,0.92);
            box-shadow: var(--shadow);
        }
        .card-header {
            min-height: 58px;
            padding: 16px 22px;
            border-bottom-color: rgba(111,122,114,0.16);
            background: linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,254,250,0.55));
        }
        .card-header h2 {
            font-size: 17px;
            font-weight: 780;
            color: #17211e;
        }
        .card-body {
            padding: 22px;
        }
        .settings-section h3,
        .setting-label {
            color: #17211e;
            font-weight: 760;
        }
        .setting-row {
            gap: 20px;
            border-bottom-color: rgba(111,122,114,0.14);
        }
        input,
        select,
        .time-input,
        .api-key-row input,
        .user-form-grid input,
        .user-form-grid select,
        .user-toolbar input,
        .user-toolbar select,
        .bulk-bar input {
            min-height: 38px;
            border-color: rgba(111,122,114,0.26) !important;
            border-radius: 8px !important;
            background: #fffefa !important;
            color: var(--text);
            outline: none;
        }
        input:focus,
        select:focus,
        .time-input:focus {
            border-color: rgba(15,118,110,0.62) !important;
            box-shadow: 0 0 0 3px rgba(20,184,166,0.14);
        }
        input[type="checkbox"] {
            min-height: auto;
            width: auto;
            accent-color: var(--primary);
            box-shadow: none;
        }
        input[type="checkbox"]:focus {
            box-shadow: none;
        }
        .toggle {
            width: 48px;
            height: 26px;
        }
        .toggle-slider {
            background: #cfd8d3;
        }
        .toggle input:checked + .toggle-slider {
            background: var(--primary);
        }
        .toggle-slider::before {
            height: 20px;
            width: 20px;
        }
        .toggle input:checked + .toggle-slider::before {
            transform: translateX(22px);
        }
        .number-input button {
            border-color: rgba(111,122,114,0.26);
            background: #fffefa;
            border-radius: 8px;
            color: #14201d;
            font-weight: 750;
        }
        .viewer-hero,
        .user-stats {
            gap: 12px;
            margin-bottom: 20px;
        }
        .viewer-panel,
        .user-stat,
        .user-detail-box,
        .download-history-card,
        .download-item,
        .audit-item,
        .workspace-intro,
        .workspace-metrics,
        .bulk-bar {
            border-color: rgba(111,122,114,0.18);
            border-radius: 8px;
            background: rgba(255,254,250,0.9);
            box-shadow: var(--shadow);
        }
        .workspace-intro {
            background:
                linear-gradient(135deg, rgba(20,184,166,0.16), rgba(255,254,250,0.82) 52%),
                #fffefa;
        }
        .workspace-kicker {
            color: var(--primary-dark);
        }
        .workspace-title {
            color: #14201d;
            letter-spacing: 0;
        }
        .workspace-subtitle {
            color: #66736e;
        }
        .workspace-metric {
            border-color: rgba(111,122,114,0.14);
        }
        .workspace-metric .label {
            color: #72807a;
        }
        .workspace-metric .value {
            color: #17211e;
        }
        .viewer-panel:first-child {
            background:
                linear-gradient(135deg, rgba(20,184,166,0.13), rgba(255,254,250,0.86) 48%),
                #fffefa;
        }
        .viewer-panel-title,
        .user-stat .label,
        .user-detail-box .label {
            color: #72807a;
            font-weight: 650;
        }
        .viewer-panel-value,
        .user-stat .value {
            color: #17211e;
            font-size: 24px;
            letter-spacing: 0;
        }
        .viewer-track-chip {
            border-color: rgba(15,118,110,0.2);
            background: #edf8f6;
            color: var(--primary-dark);
            font-weight: 650;
        }
        .auth-screen {
            background:
                linear-gradient(135deg, rgba(15,118,110,0.12), rgba(196,122,27,0.08)),
                var(--bg);
        }
        .auth-panel {
            max-width: 420px;
            border-color: rgba(111,122,114,0.2);
            border-radius: 8px;
            background: rgba(255,254,250,0.94);
            box-shadow: 0 28px 70px rgba(27,36,33,0.16);
        }
        .auth-panel p {
            color: #68746f;
        }
        .auth-tabs {
            border-radius: 999px;
            background: #eef3ee;
            padding: 4px;
        }
        .auth-tab {
            border-radius: 999px;
            background: transparent;
        }
        .auth-tab.active {
            background: #14201d;
        }
        .empty-state {
            margin-top: 8px;
            border: 1px dashed rgba(111,122,114,0.26);
            border-radius: 8px;
            background: rgba(255,254,250,0.62);
        }
        .empty-state .icon {
            border-radius: 12px;
            background: #edf8f6;
            color: var(--primary-dark);
        }
        .toast {
            border-color: rgba(111,122,114,0.2);
            border-radius: 10px;
            background: #fffefa;
            box-shadow: var(--shadow-md);
        }
        .modal-overlay {
            background: rgba(20,32,29,0.48);
            backdrop-filter: blur(4px);
        }
        .modal {
            border: 1px solid rgba(111,122,114,0.2);
            border-radius: 8px;
            background: #fffefa;
            box-shadow: 0 30px 80px rgba(20,32,29,0.24);
        }
        .modal-header,
        .modal-footer {
            border-color: rgba(111,122,114,0.16);
        }
        .history-log {
            border-color: rgba(20,32,29,0.35);
            border-radius: 10px;
            background: #14201d;
            color: #dce7e2;
        }
        .status-success { background: #e4f4e9; color: #166534; }
        .status-partial { background: #fff0d6; color: #9a5a12; }
        .status-failed { background: #fde8e5; color: #a73730; }

        /* 莫兰迪配色：灰米、灰玫瑰、灰蓝、深咖 */
        :root {
            --primary: #8c746e;
            --primary-light: #b7a5a0;
            --primary-dark: #5b4a47;
            --accent: #b88276;
            --bg: #f3efe8;
            --card: #fbf8f4;
            --text: #2f2a28;
            --text-secondary: #746b67;
            --border: #ddd3c8;
            --success: #8c766f;
            --warning: #c08a64;
            --danger: #a05f58;
            --shadow: 0 1px 2px rgba(47,42,40,0.05), 0 10px 30px rgba(47,42,40,0.04);
            --shadow-md: 0 18px 42px rgba(47,42,40,0.12);
        }
        body {
            background:
                linear-gradient(180deg, rgba(251,248,244,0.94) 0%, rgba(243,239,232,0.97) 240px),
                radial-gradient(circle at 18% 0%, rgba(183,165,160,0.18), transparent 32%),
                var(--bg);
        }
        body::before {
            background-image:
                linear-gradient(rgba(47,42,40,0.024) 1px, transparent 1px),
                linear-gradient(90deg, rgba(47,42,40,0.018) 1px, transparent 1px);
        }
        .navbar {
            background: rgba(251,248,244,0.9);
            border-bottom-color: rgba(111,100,96,0.2);
        }
        .brand-icon {
            box-shadow: 0 8px 18px rgba(91,74,71,0.14);
        }
        .brand-name,
        .workspace-title,
        .viewer-panel-value,
        .user-stat .value,
        .workspace-metric .value,
        .article-title,
        .card-header h2,
        .settings-section h3,
        .setting-label {
            color: #2f2a28;
        }
        .brand-tag {
            border-color: rgba(176,154,146,0.3);
            color: #7a615d;
            background: #f4ece7;
        }
        .navbar-nav,
        .account-chip,
        .card,
        .article-card,
        .viewer-panel,
        .user-stat,
        .user-detail-box,
        .download-history-card,
        .download-item,
        .audit-item,
        .workspace-intro,
        .workspace-metrics,
        .bulk-bar,
        .modal,
        .toast {
            border-color: rgba(111,100,96,0.18);
            background-color: rgba(251,248,244,0.92);
        }
        .navbar-nav,
        .account-chip {
            background: rgba(255,255,255,0.52);
        }
        .nav-btn {
            color: #766b67;
        }
        .nav-btn:hover,
        .btn-ghost:hover {
            background: rgba(139,116,110,0.09);
            color: var(--primary-dark);
        }
        .nav-btn.active,
        .filter-btn.active,
        .auth-tab.active {
            background: #5b4a47;
            border-color: #5b4a47;
            color: #fff8f4;
            box-shadow: 0 8px 18px rgba(47,42,40,0.16);
        }
        .gen-btn-group {
            box-shadow: 0 10px 24px rgba(91,74,71,0.18);
        }
        .gen-btn-main:disabled {
            background: #958680;
        }
        .dropdown-menu {
            background: #fbf8f4;
            border-color: rgba(111,100,96,0.2);
        }
        .dropdown-item:hover,
        .btn-outline:hover,
        .empty-state .icon,
        .viewer-track-chip {
            background: #f1e7e2;
        }
        .filter-btn {
            border-color: rgba(111,100,96,0.22);
            background: rgba(251,248,244,0.82);
            color: #685f5c;
        }
        .filter-btn:hover,
        .article-card:hover {
            border-color: rgba(139,116,110,0.34);
        }
        .article-card,
        .card,
        .viewer-panel,
        .user-stat,
        .workspace-intro,
        .workspace-metrics {
            background: rgba(251,248,244,0.92);
        }
        .article-card.generating {
            border-color: rgba(192,138,100,0.34);
            background: #f7efea;
        }
        .article-card.failed {
            border-color: rgba(160,95,88,0.28);
            background: #f8eeec;
        }
        .article-summary,
        .workspace-subtitle {
            color: #716764;
        }
        .article-topic-reason,
        .workspace-kicker {
            color: #8c746e;
        }
        .article-meta,
        .viewer-panel-title,
        .user-stat .label,
        .user-detail-box .label,
        .workspace-metric .label {
            color: #7a726d;
        }
        .track-感悟赛道,
        .track-情感赛道 { background: #f1e3e4; color: #8f5e68; }
        .track-AI赛道 { background: #e7eaef; color: #667185; }
        .track-人物赛道 { background: #ebe4ec; color: #7b6f8f; }
        .track-生活赛道 { background: #efe4d8; color: #7d6458; }
        .track-高校赛道 { background: #efe6db; color: #8a715f; }
        input,
        select,
        .time-input,
        .api-key-row input,
        .user-form-grid input,
        .user-form-grid select,
        .user-toolbar input,
        .user-toolbar select,
        .bulk-bar input {
            border-color: rgba(111,100,96,0.26) !important;
            background: #fbf8f4 !important;
        }
        input:focus,
        select:focus,
        .time-input:focus {
            border-color: rgba(139,116,110,0.62) !important;
            box-shadow: 0 0 0 3px rgba(183,165,160,0.16);
        }
        .toggle-slider {
            background: #d8d0cb;
        }
        .number-input button {
            border-color: rgba(111,100,96,0.26);
            background: #fbf8f4;
        }
        .workspace-intro,
        .viewer-panel:first-child {
            background:
                linear-gradient(135deg, rgba(183,165,160,0.16), rgba(251,248,244,0.84) 52%),
                #fbf8f4;
        }
        .viewer-track-chip {
            border-color: rgba(139,116,110,0.22);
            color: var(--primary-dark);
        }
        .auth-screen {
            background:
                linear-gradient(135deg, rgba(183,165,160,0.16), rgba(184,130,118,0.1)),
                var(--bg);
        }
        .auth-panel {
            border-color: rgba(111,100,96,0.2);
            background: rgba(251,248,244,0.94);
            box-shadow: 0 28px 70px rgba(47,42,40,0.16);
        }
        .auth-panel p,
        .btn-ghost {
            color: #766b67;
        }
        .auth-tabs {
            background: #eee8e4;
        }
        .empty-state {
            border-color: rgba(111,100,96,0.26);
            background: rgba(251,248,244,0.62);
        }
        .modal-overlay {
            background: rgba(47,42,40,0.48);
        }
        .modal-header,
        .modal-footer,
        .workspace-metric,
        .setting-row {
            border-color: rgba(111,100,96,0.16);
        }
        .history-log {
            border-color: rgba(47,42,40,0.35);
            background: #2f2a28;
            color: #e7ddd7;
        }
        .status-success { background: #efe6e0; color: #6d5a54; }
        .status-partial { background: #f3e1d6; color: #9a6a55; }
        .status-failed { background: #f4e0dc; color: #9c5d57; }
        .quota-ok { color: #7c675f; }
        .quota-low { color: #a36e52; }
        .quota-empty,
        .article-error-reason { color: #9c5d57; }

        /* 蓝金山水配色：参考深蓝山脉、暖金纹理和米黄色纸感 */
        :root {
            --primary: #1f5f9f;
            --primary-light: #5d92c2;
            --primary-dark: #12386b;
            --accent: #d4a84b;
            --bg: #f4e3b8;
            --card: #fff9ea;
            --text: #1b2f4b;
            --text-secondary: #6e7890;
            --border: #e5d2a2;
            --success: #426f9f;
            --warning: #b8882f;
            --danger: #a45e54;
            --shadow: 0 1px 2px rgba(27,47,75,0.06), 0 14px 36px rgba(27,47,75,0.08);
            --shadow-md: 0 18px 48px rgba(18,56,107,0.18);
        }
        body {
            background:
                linear-gradient(180deg, rgba(249,228,171,0.92) 0%, rgba(244,227,184,0.98) 245px),
                radial-gradient(circle at 18% 0%, rgba(212,168,75,0.28), transparent 34%),
                linear-gradient(135deg, rgba(31,95,159,0.08), transparent 48%),
                var(--bg);
        }
        body::before {
            background-image:
                linear-gradient(rgba(18,56,107,0.035) 1px, transparent 1px),
                linear-gradient(90deg, rgba(184,136,47,0.035) 1px, transparent 1px);
            background-size: 34px 34px;
        }
        .navbar {
            background: rgba(255,249,234,0.9);
            border-bottom-color: rgba(184,136,47,0.24);
        }
        .brand-icon {
            box-shadow: 0 8px 22px rgba(31,95,159,0.2);
        }
        .brand-name,
        .workspace-title,
        .viewer-panel-value,
        .user-stat .value,
        .workspace-metric .value,
        .article-title,
        .card-header h2,
        .settings-section h3,
        .setting-label {
            color: #1b2f4b;
        }
        .brand-tag {
            border-color: rgba(212,168,75,0.42);
            color: #8f6724;
            background: #fff0c7;
        }
        .navbar-nav,
        .account-chip {
            background: rgba(255,249,234,0.58);
            border-color: rgba(184,136,47,0.22);
        }
        .nav-btn,
        .btn-ghost,
        .account-chip {
            color: #64728b;
        }
        .nav-btn:hover,
        .btn-ghost:hover {
            background: rgba(31,95,159,0.1);
            color: var(--primary-dark);
        }
        .nav-btn.active,
        .filter-btn.active,
        .auth-tab.active {
            background: #12386b;
            border-color: #12386b;
            color: #fff9ea;
            box-shadow: 0 8px 18px rgba(18,56,107,0.2);
        }
        .gen-btn-group {
            box-shadow: 0 12px 28px rgba(31,95,159,0.24);
        }
        .gen-btn-main:disabled {
            background: #7a88a0;
        }
        .dropdown-menu,
        .toast,
        .modal {
            background: #fff9ea;
            border-color: rgba(184,136,47,0.24);
        }
        .dropdown-item:hover,
        .btn-outline:hover,
        .empty-state .icon,
        .viewer-track-chip {
            background: #edf5fb;
        }
        .filter-btn {
            border-color: rgba(184,136,47,0.28);
            background: rgba(255,249,234,0.82);
            color: #596b85;
        }
        .filter-btn:hover,
        .article-card:hover {
            border-color: rgba(31,95,159,0.38);
        }
        .article-card,
        .card,
        .viewer-panel,
        .user-stat,
        .user-detail-box,
        .download-history-card,
        .download-item,
        .audit-item,
        .workspace-intro,
        .workspace-metrics,
        .bulk-bar {
            background: rgba(255,249,234,0.92);
            border-color: rgba(184,136,47,0.22);
        }
        .article-card::before {
            background: linear-gradient(180deg, #d4a84b, #1f5f9f);
        }
        .article-card.generating {
            border-color: rgba(212,168,75,0.48);
            background: #fff4d6;
        }
        .article-card.failed {
            border-color: rgba(164,94,84,0.32);
            background: #fbede8;
        }
        .card-header {
            background: linear-gradient(180deg, rgba(255,249,234,0.86), rgba(251,238,203,0.62));
            border-bottom-color: rgba(184,136,47,0.2);
        }
        .article-summary,
        .workspace-subtitle {
            color: #65738c;
        }
        .article-topic-reason,
        .workspace-kicker {
            color: #1f5f9f;
        }
        .article-meta,
        .viewer-panel-title,
        .user-stat .label,
        .user-detail-box .label,
        .workspace-metric .label {
            color: #758096;
        }
        .track-感悟赛道,
        .track-情感赛道 { background: #f6e3d8; color: #9a654e; }
        .track-AI赛道 { background: #e3edf7; color: #1f5f9f; }
        .track-人物赛道 { background: #e9e4ee; color: #6f6690; }
        .track-生活赛道 { background: #edf2dc; color: #6f7b49; }
        .track-高校赛道 { background: #f7e8bd; color: #8b6421; }
        input,
        select,
        .time-input,
        .api-key-row input,
        .user-form-grid input,
        .user-form-grid select,
        .user-toolbar input,
        .user-toolbar select,
        .bulk-bar input {
            border-color: rgba(184,136,47,0.28) !important;
            background: #fff9ea !important;
        }
        input:focus,
        select:focus,
        .time-input:focus {
            border-color: rgba(31,95,159,0.62) !important;
            box-shadow: 0 0 0 3px rgba(93,146,194,0.2);
        }
        .toggle-slider {
            background: #d8cda6;
        }
        .number-input button {
            border-color: rgba(184,136,47,0.28);
            background: #fff9ea;
            color: #1b2f4b;
        }
        .workspace-intro,
        .viewer-panel:first-child {
            background:
                linear-gradient(135deg, rgba(31,95,159,0.16), rgba(255,249,234,0.82) 48%),
                linear-gradient(180deg, rgba(212,168,75,0.12), transparent),
                #fff9ea;
        }
        .viewer-track-chip {
            border-color: rgba(31,95,159,0.22);
            color: var(--primary-dark);
        }
        .auth-screen {
            background:
                linear-gradient(135deg, rgba(31,95,159,0.16), rgba(212,168,75,0.22)),
                var(--bg);
        }
        .auth-panel {
            background: rgba(255,249,234,0.94);
            border-color: rgba(184,136,47,0.28);
            box-shadow: 0 28px 70px rgba(18,56,107,0.2);
        }
        .auth-panel p {
            color: #64728b;
        }
        .auth-tabs {
            background: #f3e7c5;
        }
        .empty-state {
            border-color: rgba(184,136,47,0.3);
            background: rgba(255,249,234,0.66);
        }
        .modal-overlay {
            background: rgba(18,36,64,0.48);
        }
        .modal-header,
        .modal-footer,
        .workspace-metric,
        .setting-row {
            border-color: rgba(184,136,47,0.2);
        }
        .history-log {
            border-color: rgba(18,56,107,0.45);
            background: #13294a;
            color: #e8f0f7;
        }
        .status-success { background: #e3edf7; color: #265f92; }
        .status-partial { background: #f7e8bd; color: #8b6421; }
        .status-failed { background: #f2ded8; color: #9b5b52; }
        .quota-ok { color: #265f92; }
        .quota-low { color: #9a6d24; }
        .quota-empty,
        .article-error-reason { color: #9b5b52; }

        /* 最终主题：monochromatic Morandi watercolor + approachable luxury */
        :root {
            --primary: #7891ad;
            --primary-light: #aebdcb;
            --primary-dark: #566c85;
            --accent: #c4b59f;
            --bg: #f2eee8;
            --card: rgba(255, 253, 248, 0.72);
            --text: #2d3744;
            --text-secondary: #75808d;
            --border: rgba(120,145,173,0.22);
            --success: #7891ad;
            --warning: #b7a486;
            --danger: #a77f7a;
            --shadow: 0 1px 2px rgba(45,55,68,0.04), 0 18px 48px rgba(86,108,133,0.08);
            --shadow-md: 0 22px 62px rgba(86,108,133,0.16);
        }
        body {
            background:
                radial-gradient(circle at 18% 0%, rgba(174,189,203,0.32), transparent 36%),
                radial-gradient(circle at 88% 10%, rgba(196,181,159,0.24), transparent 30%),
                linear-gradient(180deg, rgba(250,247,241,0.92) 0%, rgba(242,238,232,0.98) 260px),
                var(--bg);
        }
        body::before {
            background-image:
                linear-gradient(rgba(86,108,133,0.022) 1px, transparent 1px),
                linear-gradient(90deg, rgba(86,108,133,0.018) 1px, transparent 1px);
            background-size: 38px 38px;
        }
        .navbar {
            background: rgba(255,253,248,0.64);
            border-bottom-color: rgba(120,145,173,0.18);
            backdrop-filter: blur(22px) saturate(130%);
        }
        .brand-icon {
            box-shadow: 0 10px 26px rgba(86,108,133,0.16);
        }
        .brand-name,
        .workspace-title,
        .viewer-panel-value,
        .user-stat .value,
        .workspace-metric .value,
        .article-title,
        .card-header h2,
        .settings-section h3,
        .setting-label {
            color: #2d3744;
        }
        .brand-tag {
            border-color: rgba(196,181,159,0.42);
            color: #776a59;
            background: rgba(250,246,238,0.72);
        }
        .navbar-nav,
        .account-chip,
        .article-card,
        .card,
        .viewer-panel,
        .user-stat,
        .user-detail-box,
        .download-history-card,
        .download-item,
        .audit-item,
        .workspace-intro,
        .workspace-metrics,
        .bulk-bar,
        .auth-panel,
        .modal,
        .toast {
            background: rgba(255,253,248,0.64);
            border-color: rgba(120,145,173,0.2);
            box-shadow: var(--shadow);
            backdrop-filter: blur(18px) saturate(120%);
        }
        .navbar-nav {
            background: rgba(255,253,248,0.48);
        }
        .nav-btn,
        .btn-ghost,
        .account-chip {
            color: #6f7b89;
        }
        .nav-btn:hover,
        .btn-ghost:hover,
        .dropdown-item:hover,
        .btn-outline:hover,
        .empty-state .icon,
        .viewer-track-chip {
            background: rgba(174,189,203,0.18);
            color: var(--primary-dark);
        }
        .nav-btn.active,
        .filter-btn.active,
        .auth-tab.active {
            background: rgba(86,108,133,0.92);
            border-color: rgba(86,108,133,0.92);
            color: #fffdf8;
            box-shadow: 0 12px 26px rgba(86,108,133,0.18);
        }
        .gen-btn-group {
            box-shadow: 0 14px 32px rgba(86,108,133,0.18);
        }
        .gen-btn-main,
        .gen-btn-dropdown,
        .btn-primary {
            background: linear-gradient(180deg, #7891ad, #627a96);
            color: #fffdf8;
        }
        .gen-btn-main:hover,
        .gen-btn-dropdown:hover,
        .btn-primary:hover {
            background: linear-gradient(180deg, #6f88a5, #566c85);
        }
        .btn-success {
            background: #7891ad;
        }
        .btn-danger {
            background: #a77f7a;
        }
        .filter-btn {
            border-color: rgba(120,145,173,0.2);
            background: rgba(255,253,248,0.54);
            color: #687584;
        }
        .filter-btn:hover,
        .article-card:hover {
            border-color: rgba(120,145,173,0.36);
        }
        .article-card::before {
            background: linear-gradient(180deg, rgba(120,145,173,0.9), rgba(196,181,159,0.75));
        }
        .article-card.generating {
            border-color: rgba(183,164,134,0.34);
            background: rgba(253,248,238,0.72);
        }
        .article-card.failed {
            border-color: rgba(167,127,122,0.3);
            background: rgba(250,239,236,0.7);
        }
        .card-header {
            background: rgba(255,253,248,0.42);
            border-bottom-color: rgba(120,145,173,0.14);
        }
        .article-summary,
        .workspace-subtitle,
        .article-meta,
        .viewer-panel-title,
        .user-stat .label,
        .user-detail-box .label,
        .workspace-metric .label,
        .auth-panel p {
            color: #75808d;
        }
        .article-topic-reason,
        .workspace-kicker {
            color: #627a96;
        }
        .track-感悟赛道,
        .track-情感赛道,
        .track-AI赛道,
        .track-人物赛道,
        .track-生活赛道,
        .track-高校赛道 {
            background: rgba(174,189,203,0.18);
            color: #566c85;
        }
        .track-高校赛道,
        .track-生活赛道 {
            background: rgba(196,181,159,0.2);
            color: #6d6254;
        }
        input,
        select,
        .time-input,
        .api-key-row input,
        .user-form-grid input,
        .user-form-grid select,
        .user-toolbar input,
        .user-toolbar select,
        .bulk-bar input {
            border-color: rgba(120,145,173,0.22) !important;
            background: rgba(255,253,248,0.68) !important;
        }
        input:focus,
        select:focus,
        .time-input:focus {
            border-color: rgba(120,145,173,0.58) !important;
            box-shadow: 0 0 0 3px rgba(174,189,203,0.22);
        }
        .toggle-slider {
            background: rgba(174,189,203,0.5);
        }
        .number-input button {
            border-color: rgba(120,145,173,0.22);
            background: rgba(255,253,248,0.68);
            color: #2d3744;
        }
        .workspace-intro,
        .viewer-panel:first-child {
            background:
                linear-gradient(135deg, rgba(174,189,203,0.24), rgba(255,253,248,0.58) 52%),
                linear-gradient(180deg, rgba(196,181,159,0.12), transparent),
                rgba(255,253,248,0.66);
        }
        .auth-screen {
            background:
                radial-gradient(circle at 18% 12%, rgba(174,189,203,0.35), transparent 34%),
                linear-gradient(135deg, rgba(196,181,159,0.22), rgba(242,238,232,0.94)),
                var(--bg);
        }
        .auth-tabs {
            background: rgba(174,189,203,0.16);
        }
        .empty-state {
            border-color: rgba(120,145,173,0.24);
            background: rgba(255,253,248,0.5);
        }
        .modal-overlay {
            background: rgba(45,55,68,0.38);
            backdrop-filter: blur(6px);
        }
        .modal-header,
        .modal-footer,
        .workspace-metric,
        .setting-row {
            border-color: rgba(120,145,173,0.16);
        }
        .history-log {
            border-color: rgba(86,108,133,0.38);
            background: #2d3744;
            color: #eef2f6;
        }
        .status-success { background: rgba(174,189,203,0.26); color: #566c85; }
        .status-partial { background: rgba(196,181,159,0.24); color: #746852; }
        .status-failed { background: rgba(167,127,122,0.2); color: #8c6864; }
        .quota-ok { color: #566c85; }
        .quota-low { color: #8b7b62; }
        .quota-empty,
        .article-error-reason { color: #8c6864; }

        /* 响应式 */
        @media (max-width: 768px) {
            .navbar { height: auto; min-height: 68px; padding: 10px 14px; gap: 10px; flex-wrap: wrap; }
            .navbar-nav { order: 3; width: 100%; border-radius: 14px; }
            .navbar-actions { margin-left: auto; }
            .brand-icon { width: 30px; height: 30px; }
            .brand-name { font-size: 18px; }
            .brand-tag { padding: 3px 8px; font-size: 11px; }
            .nav-btn { padding: 8px 10px; white-space: nowrap; }
            .account-chip { display: none; }
            .main-content { padding: 18px 14px 34px; }
            .article-card { flex-direction: column; align-items: flex-start; }
            .article-actions { width: 100%; justify-content: flex-start; }
            .setting-row { align-items: flex-start; flex-direction: column; }
            .api-key-row { width: 100%; flex-direction: column; align-items: stretch; }
            .user-stats, .user-detail-grid { grid-template-columns: 1fr; }
            .user-form-grid { grid-template-columns: 1fr; }
            .workspace-header { grid-template-columns: 1fr; }
            .workspace-title { font-size: 22px; }
            .viewer-hero { grid-template-columns: 1fr; }
        }

/* ===== 编辑部工作台布局 ===== */
body { background: #f4f3f8; color: #252331; }
.navbar {
    position: fixed; inset: 0 auto 0 0; width: 236px; height: 100vh;
    padding: 24px 16px 18px; border: 0; border-right: 1px solid #e5e1ec;
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    background: #fbfaff; box-shadow: none; z-index: 300;
}
.navbar-brand { padding: 0 10px 24px; }
.brand-name { font-family: Georgia, 'Noto Serif SC', serif; letter-spacing: .06em; }
.navbar-nav {
    display: flex; flex-direction: column; gap: 4px; overflow: visible;
    background: transparent; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none;
}
.nav-section-label {
    margin: 18px 12px 7px; color: #9a94a7; font-size: 10px; font-weight: 800;
    letter-spacing: .16em; text-transform: uppercase;
}
.nav-btn {
    width: 100%; display: flex; align-items: center; gap: 11px; padding: 10px 12px;
    border-radius: 9px; text-align: left; color: #625d6e; font-weight: 600;
}
.nav-btn span { width: 18px; color: #8c849b; text-align: center; }
.nav-btn:hover { background: #f0edf5; color: #332d3e; }
.nav-btn.active { background: #e9e4f1; color: #5c476f; box-shadow: inset 3px 0 #806694; }
.navbar-actions {
    margin-top: auto; padding: 16px 8px 0; border-top: 1px solid #ebe7f0;
    display: flex; flex-direction: column; align-items: stretch; gap: 10px !important;
}
.account-chip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.main-content { max-width: none; margin-left: 236px; padding: 0 36px 48px; }
.command-bar {
    min-height: 86px; display: flex; align-items: center; justify-content: space-between;
    gap: 24px; border-bottom: 1px solid #e5e1ec; margin: 0 -36px 28px; padding: 14px 36px;
    position: sticky; top: 0; z-index: 90; background: rgba(244,243,248,.94); backdrop-filter: blur(12px);
}
.command-bar h1 { font-family: Georgia, 'Noto Serif SC', serif; font-size: 25px; line-height: 1.15; }
.command-eyebrow, .page-kicker { color: #8b789b; font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.command-actions { display: flex; align-items: center; gap: 12px; }
.global-search {
    width: 290px; display: flex; align-items: center; gap: 8px; padding: 8px 12px;
    background: #fff; border: 1px solid #ddd8e5; border-radius: 9px; color: #8b8494;
}
.global-search input { width: 100%; border: 0; outline: 0; background: transparent; font-size: 13px; }
.gen-btn-group { position: relative; }
.gen-btn-main { background: #6f577f; }
.gen-btn-main:hover { background: #594467; }
.gen-btn-dropdown { background: #5e496c; }
.btn-primary { background: #6f577f; }
.btn-primary:hover { background: #594467; }
.btn-outline { color: #6f577f; border-color: #9b88a8; }
.btn-outline:hover { background: #6f577f; border-color: #6f577f; }

.editorial-hero {
    min-height: 190px; padding: 34px 38px; display: flex; justify-content: space-between; align-items: flex-end;
    color: #f9f7fb; border-radius: 16px; background: linear-gradient(125deg, #302738 0%, #5a4866 60%, #806b8d 100%);
    box-shadow: 0 14px 36px rgba(50, 39, 58, .16); overflow: hidden; position: relative;
}
.editorial-hero::after { content: '稿'; position: absolute; right: 11%; top: -76px; font: 240px Georgia, serif; color: rgba(255,255,255,.045); }
.editorial-hero h2 { max-width: 640px; margin: 8px 0; font: 31px/1.35 Georgia, 'Noto Serif SC', serif; }
.editorial-hero p { color: #d9d1de; }
.editorial-hero .btn { position: relative; z-index: 1; background: #f5f0f7; color: #4f3d5a; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 18px 0; }
.metric-card {
    padding: 19px 20px; text-align: left; background: #fff; border: 1px solid #e4e0e9; border-radius: 12px;
    color: inherit; cursor: default; box-shadow: 0 2px 8px rgba(43,35,49,.035);
}
button.metric-card { cursor: pointer; }
button.metric-card:hover { border-color: #9c88aa; transform: translateY(-1px); }
.metric-card span, .metric-card small { display: block; color: #7b7583; font-size: 12px; }
.metric-card strong { display: block; margin: 5px 0 3px; font: 29px Georgia, serif; color: #3f3347; }
.desk-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 18px; }
.desk-panel { padding: 22px; background: #fff; border: 1px solid #e4e0e9; border-radius: 13px; }
.panel-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 13px; }
.panel-title h3 { font: 18px Georgia, 'Noto Serif SC', serif; }
.panel-title button { border: 0; background: none; color: #755e84; cursor: pointer; }
.desk-row { display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: center; padding: 12px 0; border-top: 1px solid #f0edf3; }
.desk-row strong, .desk-row small { display: block; }
.desk-row small, .desk-row time { color: #8a8491; font-size: 11px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #8c8595; }
.status-dot.failed { background: #bd6e69; }
.track-volume { display: grid; grid-template-columns: 82px 1fr 26px; gap: 10px; align-items: center; padding: 10px 0; font-size: 12px; }
.track-volume div { height: 6px; overflow: hidden; background: #eeeaf1; border-radius: 10px; }
.track-volume i { display: block; height: 100%; background: #8b7398; border-radius: inherit; }
.empty-compact { padding: 30px 10px; color: #948e9b; text-align: center; font-size: 13px; }
.loading-skeleton { padding: 52px; border-radius: 12px; background: linear-gradient(90deg,#f0edf3,#faf9fb,#f0edf3); background-size: 200% 100%; animation: shimmer 1.4s infinite; color: #8a8491; text-align: center; }
@keyframes shimmer { to { background-position: -200% 0; } }

.page-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 18px; }
.page-heading h2 { margin-top: 5px; font: 24px Georgia, 'Noto Serif SC', serif; }
.muted { color: #817b89; font-size: 12px; }
.review-queue { display: grid; gap: 10px; }
.review-row {
    width: 100%; padding: 17px 20px; display: flex; justify-content: space-between; align-items: center; gap: 20px;
    background: #fff; border: 1px solid #e4e0e9; border-radius: 11px; text-align: left; cursor: pointer;
}
.review-row:hover { border-color: #9f8aac; box-shadow: 0 5px 16px rgba(54,42,61,.07); }
.review-row h3 { margin: 7px 0 3px; font-size: 15px; }
.review-row p { max-width: 670px; color: #7a7481; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.review-row-meta { display: flex; align-items: center; gap: 13px; color: #817b89; font-size: 11px; white-space: nowrap; }
.review-row-meta b { color: #6f577f; }
.quality-pill, .workflow-badge { padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; }
.quality-pill.passed, .workflow-badge.approved, .workflow-badge.exported { color: #39705b; background: #e5f2ec; }
.quality-pill.warning, .workflow-badge.pending_review { color: #8a691f; background: #f6edd2; }
.quality-pill.blocked, .workflow-badge.changes_requested { color: #9b4d4b; background: #f7dfde; }

.review-modal { width: min(1180px, 94vw); height: min(880px, 92vh); display: flex; flex-direction: column; }
.review-workspace { min-height: 0; flex: 1; display: grid; grid-template-columns: 350px 1fr; background: #f1eef4; }
.review-meta { overflow-y: auto; padding: 22px; background: #fff; border-right: 1px solid #e2dde7; }
.review-meta-section + .review-meta-section { border-top: 1px solid #e9e5ed; margin-top: 20px; padding-top: 20px; }
.review-meta h3 { margin: 8px 0; font: 19px/1.4 Georgia, 'Noto Serif SC', serif; }
.review-meta p { color: #756f7b; font-size: 12px; }
.review-meta dl { margin-top: 15px; }
.review-meta dl div { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid #f0edf2; font-size: 12px; }
.review-meta dt { color: #8b8592; }
.quality-summary { margin: 10px 0; padding: 9px 11px; border-radius: 8px; font-weight: 700; font-size: 12px; }
.quality-summary.passed { background: #e6f2ec; color: #39705b; }
.quality-summary.warning { background: #f7efd8; color: #87691f; }
.quality-summary.blocked { background: #f7e1e0; color: #994d4a; }
.check-item { display: flex; gap: 9px; padding: 9px 0; border-top: 1px solid #f0edf2; font-size: 11px; }
.check-item > span { width: 18px; height: 18px; border-radius: 50%; text-align: center; line-height: 18px; background: #ebe8ef; }
.check-item.passed > span { color: #39705b; background: #e2f1e9; }
.check-item.block > span { color: #994d4a; background: #f6dddc; }
.check-item strong { font-size: 11px; }
.check-item p { margin-top: 2px; }
.review-preview { min-width: 0; padding: 18px; overflow: auto; }
.review-preview-tabs { text-align: center; margin-bottom: 10px; }
.review-preview-tabs button { padding: 6px 12px; border: 0; border-bottom: 2px solid #775e85; background: none; color: #5e486a; }
.review-preview-tabs button:not(.active) { border-bottom-color: transparent; color: #91889a; }
.phone-preview { width: min(540px, 100%); min-height: 620px; margin: auto; padding: 28px; background: #fff; border-radius: 15px; box-shadow: 0 10px 35px rgba(42,34,48,.11); }
.markdown-preview { white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.75 Consolas, "Microsoft YaHei", monospace; color: #3f3945; }
.review-actions { position: sticky; bottom: 0; }
.mobile-readonly-notice { display: none; margin: 10px 0; padding: 9px 12px; border: 1px solid #ead9a8; border-radius: 8px; background: #fff8df; color: #765d19; font-size: 12px; }

.job-detail-modal { max-width: 760px; }
.job-stage-list { display: grid; gap: 10px; }
.job-stage-row { display: grid; grid-template-columns: minmax(110px, 1fr) 110px 100px; gap: 12px; align-items: center; padding: 13px; border: 1px solid #e8e3eb; border-radius: 9px; }
.job-stage-row p { grid-column: 1 / -1; margin: 0; color: #98514e; font-size: 11px; }

:where(button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid rgba(111, 87, 127, .34); outline-offset: 2px; }

.job-card { display: flex; align-items: center; gap: 18px; margin-bottom: 10px; padding: 17px 20px; background: #fff; border: 1px solid #e4e0e9; border-radius: 11px; }
.job-status { width: 88px; display: flex; align-items: center; gap: 7px; color: #746e7c; font-size: 11px; font-weight: 700; }
.job-status span { width: 8px; height: 8px; border-radius: 50%; background: #9992a0; }
.job-status.running span, .job-status.queued span { background: #b68b36; box-shadow: 0 0 0 4px #f6edda; }
.job-status.succeeded span { background: #4e876e; }
.job-status.failed span, .job-status.timed_out span { background: #b95e5b; }
.job-main { flex: 1; min-width: 0; }
.job-main h3 { font-size: 14px; }
.job-main p, .job-main small { color: #817b89; font-size: 11px; }
.job-main p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-actions { display: flex; gap: 7px; }

@media (max-width: 900px) {
    .navbar { width: 78px; padding: 20px 10px; }
    .navbar .brand-name, .navbar .brand-tag, .nav-section-label, .nav-btn:not(.active) span + *, .account-chip { display: none; }
    .navbar-brand { padding: 0 11px 20px; }
    .nav-btn { justify-content: center; font-size: 0; }
    .nav-btn span { font-size: 16px; }
    .main-content { margin-left: 78px; padding: 0 18px 36px; }
    .command-bar { margin: 0 -18px 22px; padding: 12px 18px; }
    .global-search { width: 210px; }
    .metric-grid { grid-template-columns: repeat(2, 1fr); }
    .desk-grid { grid-template-columns: 1fr; }
    .review-workspace { grid-template-columns: 1fr; }
    .review-meta { max-height: 42vh; border-right: 0; border-bottom: 1px solid #e2dde7; }
}
@media (max-width: 620px) {
    .navbar { inset: auto 0 0; width: 100%; height: 62px; padding: 7px; flex-direction: row; border-right: 0; border-top: 1px solid #ddd8e5; }
    .navbar-brand, .navbar-actions, .nav-section-label { display: none !important; }
    .navbar-nav { width: 100%; flex-direction: row; justify-content: space-around; overflow-x: auto; }
    .nav-btn { min-width: 58px; padding: 8px 6px; font-size: 9px; flex-direction: column; gap: 1px; }
    .nav-btn span { font-size: 14px; }
    .main-content { margin-left: 0; padding: 0 12px 84px; }
    .command-bar { margin: 0 -12px 18px; padding: 11px 12px; position: static; }
    .command-eyebrow, .global-search, .gen-btn-dropdown { display: none; }
    .command-bar h1 { font-size: 21px; }
    .gen-btn-main { padding: 8px 10px; font-size: 11px; }
    .editorial-hero { min-height: 170px; padding: 24px; align-items: flex-start; flex-direction: column; }
    .editorial-hero h2 { font-size: 24px; }
    .metric-grid { grid-template-columns: 1fr 1fr; }
    .review-row, .job-card { align-items: flex-start; flex-direction: column; }
    .review-row-meta { width: 100%; flex-wrap: wrap; }
    .phone-preview { padding: 16px; }
    .mobile-readonly-notice { display: block; }
    .gen-btn-group, .review-actions, .job-actions .btn-primary, #settingsPage > div:last-child { display: none !important; }
    .job-stage-row { grid-template-columns: 1fr; }
}
/* End responsive editorial workspace styles. */