/* mail.citilhub.com — Theme System */ /* Light / Dark toggle via [data-theme="dark"] on */ :root { /* Light theme (default) */ --color-bg: #F5F5F0; --color-surface: #FFFFFF; --color-surface-hover: #F8F8F5; --color-border: #E5E5E0; --color-border-strong: #D0D0CB; --color-text: #1A1A18; --color-text-secondary: #5A5A55; --color-text-muted: #8A8A85; --color-text-dim: #ABABAB; --color-accent: #3B6DE0; --color-accent-soft: rgba(59, 109, 224, 0.08); --color-accent-text: #2B5BC0; --color-danger: #D94452; --color-danger-soft: rgba(217, 68, 82, 0.08); --color-danger-border: rgba(217, 68, 82, 0.15); --color-warning: #C58520; --color-warning-soft: rgba(197, 133, 32, 0.08); --color-warning-border: rgba(197, 133, 32, 0.15); --color-success: #2E8B57; --color-success-soft: rgba(46, 139, 87, 0.08); --color-success-border: rgba(46, 139, 87, 0.15); --color-info: #2E86C1; --color-info-soft: rgba(46, 134, 193, 0.08); --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --radius: 8px; --radius-lg: 12px; } [data-theme="dark"] { --color-bg: #0E1117; --color-surface: #161B26; --color-surface-hover: #1C2333; --color-border: #252D3D; --color-border-strong: #303B50; --color-text: #E8ECF4; --color-text-secondary: #9BA4B8; --color-text-muted: #6B7690; --color-text-dim: #4A5468; --color-accent: #6B9EFF; --color-accent-soft: rgba(107, 158, 255, 0.1); --color-accent-text: #8BB4FF; --color-danger: #FF6B7A; --color-danger-soft: rgba(255, 107, 122, 0.1); --color-danger-border: rgba(255, 107, 122, 0.2); --color-warning: #FFAA3E; --color-warning-soft: rgba(255, 170, 62, 0.1); --color-warning-border: rgba(255, 170, 62, 0.2); --color-success: #4ADE80; --color-success-soft: rgba(74, 222, 128, 0.1); --color-success-border: rgba(74, 222, 128, 0.2); --color-info: #60BFF0; --color-info-soft: rgba(96, 191, 240, 0.1); } /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-sans); background: var(--color-bg); color: var(--color-text); font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* ── Typography ── */ .text-primary { color: var(--color-text); } .text-secondary { color: var(--color-text-secondary); } .text-muted { color: var(--color-text-muted); } .text-accent { color: var(--color-accent-text); } .text-danger { color: var(--color-danger); } .text-warning { color: var(--color-warning); } .text-success { color: var(--color-success); } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fs-12 { font-size: 12px; } .fs-13 { font-size: 13px; } .fs-14 { font-size: 14px; } .fs-16 { font-size: 16px; } .fs-18 { font-size: 18px; } .fs-20 { font-size: 20px; } .fs-24 { font-size: 24px; } /* ── Layout ── */ .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-10 { gap: 10px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } /* ── Components ── */ .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; } .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s; text-decoration: none; } .btn:hover { background: var(--color-surface-hover); border-color: var(--color-border-strong); } .btn-primary { background: var(--color-accent); color: #fff; border-color: var(--color-accent); } .btn-primary:hover { opacity: 0.9; } .btn-sm { padding: 5px 10px; font-size: 12px; } /* ── Badge / Tag ── */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 5px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; } .badge-urgent { background: var(--color-danger-soft); color: var(--color-danger); } .badge-followup { background: var(--color-warning-soft); color: var(--color-warning); } .badge-info { background: var(--color-info-soft); color: var(--color-info); } .badge-spam { background: var(--color-surface-hover); color: var(--color-text-muted); } .badge-positive { background: var(--color-success-soft); color: var(--color-success); } .badge-negative { background: var(--color-danger-soft); color: var(--color-danger); } .badge-neutral { background: var(--color-surface-hover); color: var(--color-text-muted); } /* ── Stat Card ── */ .stat-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 14px 16px; display: flex; align-items: center; gap: 12px; flex: 1; min-width: 120px; } .stat-value { font-size: 22px; font-weight: 600; line-height: 1; } .stat-label { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; } /* ── Email Row ── */ .email-row { padding: 14px 18px; border-bottom: 1px solid var(--color-border); display: flex; gap: 12px; align-items: flex-start; cursor: pointer; transition: background 0.12s; } .email-row:hover, .email-row.active { background: var(--color-surface-hover); } .email-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex-shrink: 0; } .email-dot-urgent { background: var(--color-danger); } .email-dot-followup { background: var(--color-warning); } .email-dot-info { background: var(--color-info); } .email-dot-spam { background: var(--color-text-dim); } .email-from { font-size: 14px; font-weight: 500; color: var(--color-text); } .email-subject { font-size: 13px; color: var(--color-text-secondary); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .email-date { font-size: 12px; color: var(--color-text-muted); margin-top: 4px; } /* ── Filter Tabs ── */ .filter-bar { display: flex; gap: 6px; padding: 10px 18px; border-bottom: 1px solid var(--color-border); overflow-x: auto; } .filter-btn { padding: 5px 14px; border-radius: 6px; font-size: 12px; font-weight: 500; border: none; cursor: pointer; background: var(--color-surface-hover); color: var(--color-text-muted); font-family: inherit; white-space: nowrap; transition: all 0.12s; } .filter-btn:hover { color: var(--color-text); } .filter-btn.active { background: var(--color-accent); color: #fff; } /* ── Theme Toggle ── */ .theme-toggle { display: flex; align-items: center; background: var(--color-surface-hover); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 3px; gap: 2px; } .theme-toggle-btn { padding: 4px 10px; border-radius: 5px; font-size: 12px; border: none; cursor: pointer; background: transparent; color: var(--color-text-muted); font-family: inherit; display: flex; align-items: center; gap: 4px; transition: all 0.15s; } .theme-toggle-btn.active { background: var(--color-accent); color: #fff; } /* ── AI Summary Box ── */ .ai-box { padding: 14px 16px; border-radius: var(--radius); background: var(--color-surface-hover); border: 1px solid var(--color-border); margin: 12px 0; } .ai-box-label { font-size: 11px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; } .ai-box-text { font-size: 14px; line-height: 1.7; color: var(--color-text); } .ai-box-danger { background: var(--color-danger-soft); border-color: var(--color-danger-border); } .ai-box-danger .ai-box-label { color: var(--color-danger); } .ai-box-accent { background: var(--color-accent-soft); border-color: rgba(59, 109, 224, 0.15); } .ai-box-accent .ai-box-label { color: var(--color-accent-text); } /* ── Scrollbar ── */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--color-border-strong); } /* ── Responsive ── */ @media (max-width: 768px) { .hide-mobile { display: none !important; } .stat-card { min-width: 90px; padding: 10px 12px; } .stat-value { font-size: 18px; } }