:root { --bg:#f5f7fb; --surface:#fff; --surface-muted:#f8f9fc; --ink:#182230; --muted:#748095; --line:#e7ebf1; --accent:#3167e8; --accent-soft:#edf2ff; --danger:#d94c58; --shadow:0 16px 40px rgba(26,44,80,.08); }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; font-size:14px; }
button,input,textarea { font:inherit; }
button { cursor:pointer; border:0; }
.app-shell { min-height:100vh; display:flex; flex-direction:column; }
.topbar { height:72px; padding:0 34px; display:flex; align-items:center; justify-content:space-between; background:var(--surface); border-bottom:1px solid var(--line); }
.brand-block,.topbar-actions,.sidebar-heading,.mail-toolbar,.mail-heading,.toolbar-actions,.detail-toolbar,.detail-actions,.import-footer { display:flex; align-items:center; }
.brand-mark { width:34px; height:34px; display:grid; place-items:center; color:#fff; background:var(--accent); border-radius:10px; font-weight:800; margin-right:11px; box-shadow:0 7px 16px rgba(49,103,232,.25); }
.brand-name { font-size:16px; line-height:18px; font-weight:760; letter-spacing:-.02em; }.brand-caption,.eyebrow { color:var(--muted); font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; }
.topbar-actions { gap:16px; }.sync-indicator { display:flex; align-items:center; color:var(--muted); font-size:12px; gap:7px; }.status-dot { width:7px; height:7px; border-radius:50%; background:#28b56d; box-shadow:0 0 0 3px #e4f7ec; }
.icon-btn,.avatar,.add-btn,.back-btn,.close-btn { background:transparent; color:var(--muted); }.icon-btn { width:34px; height:34px; border-radius:9px; font-size:17px; }.icon-btn:hover,.back-btn:hover { background:var(--surface-muted); color:var(--ink); }.avatar { width:32px; height:32px; background:#e7edff; color:var(--accent); border-radius:50%; font-size:11px; font-weight:800; }
.workspace { --sidebar-width:310px; flex:1; display:grid; grid-template-columns:var(--sidebar-width) 6px minmax(0,1fr); min-height:calc(100vh - 72px); }.sidebar { background:var(--surface); border-right:1px solid var(--line); padding:28px 18px 20px; display:flex; flex-direction:column; min-width:0; }.sidebar-resizer { background:transparent; cursor:col-resize; position:relative; z-index:2; }.sidebar-resizer::after { content:""; position:absolute; top:0; bottom:0; left:2px; width:2px; background:transparent; transition:.15s; }.sidebar-resizer:hover::after,.sidebar-resizer:focus::after,.sidebar-resizer.dragging::after { background:var(--accent); }.sidebar-heading { justify-content:space-between; padding:0 10px 20px; }.sidebar h1,.mail-toolbar h2,.detail-view h2,.modal h2 { margin:3px 0 0; font-size:21px; line-height:1.15; letter-spacing:-.025em; }.add-btn { width:30px; height:30px; border:1px solid var(--line); border-radius:8px; color:var(--accent); font-size:21px; line-height:1; }.add-btn:hover { background:var(--accent-soft); border-color:#cbd7ff; }
.search-box { display:flex; align-items:center; background:var(--surface-muted); border:1px solid transparent; border-radius:8px; color:var(--muted); gap:8px; height:38px; padding:0 10px; }.search-box:focus-within { background:var(--surface); border-color:#b9c9f9; box-shadow:0 0 0 3px var(--accent-soft); }.search-box input { flex:1; border:0; outline:0; background:transparent; color:var(--ink); min-width:0; }.search-box kbd { border:1px solid var(--line); background:var(--surface); border-radius:4px; padding:1px 5px; font-size:11px; }.account-summary { color:var(--muted); font-size:11px; padding:17px 10px 9px; }.account-summary span:first-child,.account-summary #unreadCount { color:var(--ink); font-weight:700; }.summary-separator { padding:0 4px; }
.account-list { overflow:auto; flex:1; }.account-item { display:flex; gap:11px; align-items:center; margin:3px 0; padding:11px 10px; border-radius:9px; color:var(--muted); transition:.15s; }.account-item:hover { background:var(--surface-muted); color:var(--ink); }.account-item.active { background:var(--accent-soft); color:var(--ink); }.account-avatar { width:32px; height:32px; display:grid; place-items:center; border-radius:8px; color:var(--accent); background:#e7edff; font-size:12px; font-weight:800; flex:none; }.account-copy { min-width:0; flex:1; }.account-email { color:inherit; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:650; font-size:13px; }.account-sub { font-size:11px; color:var(--muted); margin-top:3px; }.unread-badge { min-width:20px; height:20px; padding:0 6px; display:grid; place-items:center; border-radius:10px; background:var(--accent); color:#fff; font-size:10px; font-weight:700; }.sidebar-footer { padding:16px 10px 0; border-top:1px solid var(--line); }.security-note { display:flex; align-items:center; gap:8px; color:var(--muted); }.lock-icon { width:25px; height:25px; display:grid; place-items:center; border-radius:6px; background:#edf8f2; color:#1d9a5a; }.security-note strong,.security-note small { display:block; }.security-note strong { font-size:10px; color:var(--ink); }.security-note small { font-size:10px; margin-top:2px; }.text-btn { color:var(--danger); background:transparent; padding:13px 0 0; font-size:11px; }
.account-main { min-width:0; flex:1; display:flex; align-items:center; gap:11px; padding:0; text-align:left; color:inherit; background:transparent; }.account-actions { display:flex; gap:1px; opacity:0; transition:opacity .15s; }.account-item:hover .account-actions,.account-item.active .account-actions { opacity:1; }.account-action { width:22px; height:24px; display:grid; place-items:center; color:var(--muted); background:transparent; border-radius:5px; font-size:13px; }.account-action:hover { color:var(--accent); background:var(--surface); }.account-action.danger:hover { color:var(--danger); }
.content-pane { position:relative; min-width:0; background:var(--bg); }.empty-state { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; }.empty-illustration { position:relative; width:100px; height:100px; display:grid; place-items:center; border-radius:28px; color:var(--accent); background:var(--accent-soft); font-size:34px; margin-bottom:18px; }.empty-illustration i { position:absolute; width:8px; height:8px; border-radius:50%; background:#aac0ff; }.empty-illustration i:nth-child(2){right:-7px;top:22px}.empty-illustration i:nth-child(3){left:-7px;bottom:23px}.empty-illustration i:nth-child(4){right:15px;bottom:-5px}.empty-state h2 { margin:0 0 9px; font-size:22px; letter-spacing:-.03em; }.empty-state p { color:var(--muted); margin:0 0 22px; }.primary-btn,.outline-btn { height:36px; padding:0 15px; border-radius:7px; font-weight:650; font-size:12px; }.primary-btn { background:var(--accent); color:white; box-shadow:0 6px 14px rgba(49,103,232,.2); }.primary-btn:hover { background:#2558d6; }.primary-btn span { margin-left:8px; }.outline-btn { color:var(--ink); background:var(--surface); border:1px solid var(--line); }.outline-btn:hover { border-color:#b9c9f9; color:var(--accent); }.mail-view,.detail-view { padding:34px 40px; max-width:1080px; margin:0 auto; width:100%; }.mail-toolbar { justify-content:space-between; }.mail-heading { gap:15px; }.back-btn { width:30px; height:30px; border-radius:7px; font-size:20px; }.toolbar-actions { gap:9px; }.icon-btn.light { border:1px solid var(--line); background:var(--surface); }.mail-meta { display:flex; align-items:center; gap:10px; margin:24px 0 12px; color:var(--muted); font-size:12px; }.mail-meta span:first-child { color:var(--ink); font-weight:650; }.meta-divider { width:3px; height:3px; border-radius:50%; background:#b6bfcd; }.sync-time { margin-left:auto; }.mail-list { border-top:1px solid var(--line); }.mail-row { display:grid; grid-template-columns:38px minmax(150px,1.1fr) minmax(160px,2fr) auto; gap:15px; align-items:center; padding:15px 5px; border-bottom:1px solid var(--line); cursor:pointer; transition:.15s; }.mail-row:hover { background:var(--surface); padding-left:12px; padding-right:12px; }.mail-row.unread .mail-sender,.mail-row.unread .mail-subject { font-weight:750; color:var(--ink); }.mail-select { width:16px; height:16px; accent-color:var(--accent); }.mail-sender,.mail-subject { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.mail-sender { color:var(--ink); font-weight:550; }.mail-subject { color:#414d61; font-size:13px; }.mail-preview { color:var(--muted); font-weight:400; }.mail-date { color:var(--muted); font-size:11px; white-space:nowrap; }.mail-tag { padding:4px 7px; color:#c47412; background:#fff6e7; border-radius:4px; font-size:10px; }.detail-toolbar { gap:14px; color:var(--muted); font-size:12px; border-bottom:1px solid var(--line); padding-bottom:18px; }.detail-actions { margin-left:auto; gap:6px; }.mail-detail { background:var(--surface); margin-top:22px; padding:28px 32px; border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); }.detail-subject { font-size:22px; line-height:1.3; margin:0 0 22px; letter-spacing:-.02em; }.sender-line { display:flex; align-items:center; gap:11px; padding-bottom:22px; border-bottom:1px solid var(--line); }.sender-avatar { width:35px; height:35px; display:grid; place-items:center; background:#e7edff; color:var(--accent); border-radius:50%; font-size:12px; font-weight:800; }.sender-line strong { display:block; font-size:13px; }.sender-line small { color:var(--muted); font-size:11px; }.detail-date { margin-left:auto; color:var(--muted); font-size:11px; }.detail-body { padding-top:24px; white-space:pre-wrap; color:#3d4758; line-height:1.8; font-size:14px; }.detail-label { display:inline-block; margin-bottom:14px; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.1em; font-weight:700; }
.modal-backdrop { position:fixed; inset:0; display:grid; place-items:center; padding:20px; background:rgba(18,28,46,.38); z-index:10; }.modal { width:min(600px,100%); background:var(--surface); padding:28px; border-radius:13px; box-shadow:0 24px 70px rgba(10,24,52,.25); }.modal-header { display:flex; justify-content:space-between; align-items:flex-start; }.close-btn { font-size:25px; line-height:1; padding:0 4px; }.modal-intro { color:var(--muted); font-size:12px; margin:20px 0 12px; }.format-hints { display:grid; gap:6px; margin-bottom:13px; }.format-hints code { color:#51627f; background:var(--surface-muted); border-radius:5px; padding:7px 9px; overflow:auto; font-size:10px; }.modal textarea { resize:vertical; min-height:160px; width:100%; border:1px solid var(--line); border-radius:8px; padding:12px; outline:none; background:var(--surface-muted); color:var(--ink); line-height:1.6; font-size:12px; }.modal textarea:focus { border-color:#b9c9f9; box-shadow:0 0 0 3px var(--accent-soft); }.import-footer { justify-content:space-between; margin-top:15px; }.feedback { color:var(--danger); font-size:11px; }.import-footer div { display:flex; gap:8px; }.toast { position:fixed; right:24px; bottom:24px; background:#202b3b; color:#fff; border-radius:7px; padding:11px 15px; box-shadow:var(--shadow); font-size:12px; z-index:20; }.hidden { display:none !important; }
body.dark { --bg:#111722; --surface:#18212e; --surface-muted:#202b3a; --ink:#edf2f8; --muted:#91a0b5; --line:#2a3748; --accent-soft:#202f57; --shadow:0 16px 40px rgba(0,0,0,.2); }.dark .account-avatar,.dark .sender-avatar,.dark .avatar { background:#253762; }.dark .mail-subject,.dark .detail-body { color:#c6d0df; }.dark .format-hints code { color:#9eb1cd; }.dark .mail-tag { background:#40351e; color:#e5ad57; }
.small-modal { max-width:480px; }.edit-fields { display:grid; gap:12px; margin-top:22px; }.edit-fields label { display:grid; gap:6px; color:var(--muted); font-size:11px; font-weight:650; }.edit-fields input { width:100%; height:36px; border:1px solid var(--line); border-radius:7px; padding:0 10px; outline:0; background:var(--surface-muted); color:var(--ink); font-size:12px; }.edit-fields input:focus { border-color:#b9c9f9; box-shadow:0 0 0 3px var(--accent-soft); }
.account-item { gap:7px; border:1px solid transparent; border-bottom-color:var(--line); min-height:54px; }.account-item:last-child { border-bottom-color:transparent; }.account-main { overflow:hidden; }.account-main .account-copy { min-width:0; overflow:hidden; }.account-email { display:block; }.account-actions { flex:none; padding-left:5px; background:inherit; }.account-item:hover,.account-item.active { border-color:var(--line); }.account-item.active { border-color:#cbd7ff; }.account-item:hover .account-actions,.account-item.active .account-actions { background:inherit; }
@media (max-width:760px) { .topbar { padding:0 17px; }.sync-indicator { display:none; }.workspace { grid-template-columns:1fr; }.sidebar-resizer { display:none; }.sidebar { border-right:0; border-bottom:1px solid var(--line); min-height:240px; max-height:44vh; }.sidebar-footer { display:none; }.mail-view,.detail-view { padding:22px 17px; }.mail-row { grid-template-columns:27px minmax(100px,1fr) auto; gap:9px; }.mail-preview { display:none; }.mail-date { grid-column:3; grid-row:1; }.mail-tag { display:none; }.mail-toolbar h2 { font-size:17px; }.detail-date { display:none; }.mail-detail { padding:22px 18px; } }