:root{--bg: #1b1a19;--bg-side: #201f3a;--bg-panel: #252423;--bg-hover: #323130;--border: #3b3a39;--text: #f3f2f1;--text-dim: #a19f9d;--accent: #6b4eff}html.light{--bg: #f3f2f1;--bg-side: #faf9f8;--bg-panel: #ffffff;--bg-hover: #eaeaea;--border: #e1dfdd;--text: #201f1e;--text-dim: #605e5c;--accent: #0078d4}html.light .brand{color:#0072c6}html.light .folder.active,html.light .msg.sel{background:#cce4f6}html.light .day-sep{background:#eaf3fb;color:#0072c6}html.light .cat{background:#00000014}html.light .star.on{color:#d6a700}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:Segoe UI,system-ui,-apple-system,sans-serif;font-size:13px}.app{display:grid;grid-template-columns:290px 1fr;grid-template-rows:48px 1fr 26px;grid-template-areas:"topbar topbar" "sidebar main" "footer footer";height:100vh}.topbar{grid-area:topbar;display:flex;align-items:center;gap:16px;padding:0 16px;background:var(--bg-panel);border-bottom:1px solid var(--border)}.brand{font-weight:600;display:flex;align-items:center;gap:8px}.brand-logo{width:24px;height:24px;object-fit:contain}.actions{display:flex;align-items:center;gap:6px}.action{background:transparent;color:var(--text);border:1px solid var(--border);border-radius:4px;padding:4px 10px;cursor:pointer}.action:hover:not(:disabled){background:var(--bg-hover)}.action:disabled{opacity:.4;cursor:not-allowed}.action.icon-btn{display:inline-flex;align-items:center;justify-content:center;padding:6px;min-width:32px;min-height:30px}.action.icon-btn svg{display:block}.btn-label{display:none;margin-left:6px;font-size:12px;white-space:nowrap}.topbar.labels .btn-label{display:inline}.topbar.labels .icon-btn{padding:6px 10px}.msg-actions{display:flex;gap:4px;align-items:center}.action.qt-btn{gap:6px;max-width:320px}.qt-preview{display:inline-flex;gap:4px;align-items:center;flex-wrap:nowrap;overflow:hidden;max-width:230px}.qt-preview .cat{font-size:11px;white-space:nowrap}.move-select{font:inherit}.move-select option{color:#000}.days{color:var(--text-dim);display:flex;align-items:center;gap:4px}.days button{background:transparent;color:var(--text-dim);border:1px solid var(--border);border-radius:4px;padding:2px 8px;cursor:pointer}.days button.on{background:var(--accent);color:#fff;border-color:var(--accent)}.search-wrap{margin-left:auto;position:relative;display:flex;align-items:center}.search{background:var(--bg);border:1px solid var(--border);border-radius:4px;color:var(--text);padding:6px 26px 6px 10px;width:240px}.search-clear{position:absolute;right:8px;cursor:pointer;color:var(--text-dim);font-size:12px}.search-clear:hover{color:var(--text)}.search-opts{position:relative}.search-opts-pop{position:absolute;right:0;top:100%;z-index:70;margin-top:4px;background:var(--bg-panel);border:1px solid var(--border);border-radius:4px;padding:8px 10px;display:flex;flex-direction:column;gap:6px;white-space:nowrap;box-shadow:0 6px 18px #0006}.search-opts-pop label{display:flex;gap:6px;align-items:center;cursor:pointer}.recip-wrap{position:relative}.recip-suggest{position:absolute;z-index:70;left:0;right:0;top:100%;background:var(--bg-panel);border:1px solid var(--border);border-radius:0 0 4px 4px;max-height:240px;overflow-y:auto;box-shadow:0 6px 18px #00000073}.recip-item{padding:6px 10px;cursor:pointer;display:flex;gap:8px;align-items:baseline}.recip-item:hover{background:var(--bg-hover)}.recip-name{font-weight:600}.recip-email{color:var(--text-dim);font-size:12px}.sidebar{grid-area:sidebar;background:var(--bg-side);border-right:1px solid var(--border);padding:10px 6px;overflow-y:auto}.account{font-weight:600;margin:4px 8px 10px;color:var(--text-dim);word-break:break-all}.folder{display:flex;align-items:center;gap:4px;padding:5px 8px;border-radius:4px;cursor:pointer;-webkit-user-select:none;user-select:none}.folder:hover{background:#ffffff0f}.folder.active{background:#ffffff21}.twisty{width:12px;display:inline-block;text-align:center;color:var(--text-dim)}.folder-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.badge{background:var(--accent);color:#fff;border-radius:10px;padding:0 7px;font-size:11px;min-width:18px;text-align:center}.star{margin-left:4px;cursor:pointer;flex-shrink:0;opacity:0;color:var(--text-dim);font-size:13px}.folder:hover .star{opacity:.8}.star.on{color:#f1c40f}.grip{width:12px;flex-shrink:0;text-align:center;color:var(--text-dim);cursor:grab;opacity:0;font-size:12px}.fav-section .folder:hover .grip{opacity:.6}.folder.dragging{opacity:.4}.folder.drag-over{border-top:2px solid var(--accent)}.fav-section{margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--border)}.fav-header{display:flex;align-items:center;justify-content:space-between;padding-right:6px}.fav-gear{cursor:pointer;opacity:.5;font-size:13px}.fav-gear:hover{opacity:1}.fav-gear.on{opacity:1;color:var(--accent)}.fav-hint{font-size:11px;color:var(--accent);padding:2px 8px 6px}.reorder-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;z-index:40}.fav-section.reordering{position:relative;z-index:50;background:var(--bg-side);border:1px solid var(--accent);border-radius:6px;padding:6px 4px;box-shadow:0 0 14px #6b4effb3}.fav-section.reordering .folder{cursor:grab}.fav-section.reordering .grip{opacity:.85}.main{grid-area:main;display:flex;overflow:hidden}.main.main-h{flex-direction:column}.main.main-v{flex-direction:row}.list{overflow-y:auto;flex:0 0 auto;min-width:0;min-height:0}.reading{overflow-y:auto;background:var(--bg-panel);flex:1 1 0;min-width:0;min-height:0}.splitter{flex:0 0 6px;background:var(--border)}.main-h .splitter{cursor:row-resize}.main-v .splitter{cursor:col-resize}.splitter:hover{background:var(--accent)}.selbar{position:sticky;top:0;z-index:2;background:var(--accent);color:#fff;padding:5px 12px;font-size:12px}.day-sep{position:sticky;top:0;z-index:1;background:#2d2c4a;color:var(--text);padding:5px 12px;font-size:12px;font-weight:600;border-bottom:1px solid var(--border);text-transform:capitalize}.list{background:var(--bg-panel)}.msg{padding:8px 12px;border-bottom:1px solid var(--border);cursor:pointer;-webkit-user-select:none;user-select:none}.msg.flagged{background:#e74c3c24}.msg:hover{background:var(--bg-hover)}.msg.sel{background:#6b4eff38}.msg.unread{border-left:3px solid var(--accent)}.msg.unread .msg-sender{font-weight:700}.msg-line1{display:flex;justify-content:space-between;gap:8px;align-items:baseline}.msg-sender{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600;color:var(--text)}.msg-date{color:var(--text-dim);flex-shrink:0;font-size:12px}.msg-line2{display:flex;align-items:center;gap:6px;margin-top:1px}.msg-subject{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:13px;color:var(--text);font-weight:400}.clip,.flag{flex-shrink:0}.cats{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.cat{background:#ffffff1a;color:var(--text);border-radius:3px;padding:1px 6px;font-size:11px}.more{display:block;width:calc(100% - 24px);margin:10px 12px;background:transparent;color:var(--text);border:1px solid var(--border);border-radius:4px;padding:8px;cursor:pointer}.more:hover{background:var(--bg-hover)}.msgwin{display:flex;flex-direction:column;height:100vh;padding:14px 18px;background:var(--bg);color:var(--text)}.msgwin h2{margin:0 0 10px;font-size:18px}.msgwin .mail-iframe{flex:1;margin-top:12px}.msgwin .att{text-decoration:none;color:var(--text)}.read-actions{display:flex;gap:6px;margin-bottom:10px}.read-actions button{background:transparent;color:var(--text);border:1px solid var(--border);border-radius:4px;padding:5px 10px;cursor:pointer}.read-actions button:hover{background:var(--bg-hover)}.primary-action{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff}.primary-action:hover{filter:brightness(1.1)}.composer{background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;padding:16px 18px;width:640px;max-width:92vw;max-height:86vh;display:flex;flex-direction:column}.composer h3{margin:0 0 10px}.compose-context{color:var(--text-dim);font-size:12px;margin-bottom:8px}.compose-field{background:var(--bg);border:1px solid var(--border);border-radius:4px;color:var(--text);padding:8px 10px;margin-bottom:6px;font:inherit}.compose-editor{flex:1;min-height:260px;max-height:52vh;overflow-y:auto;background:#fff;border:1px solid var(--border);border-radius:4px;color:#1f9ed4;padding:12px;margin:8px 0;font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.5}.modal-overlay.windowed{padding:0;background:var(--bg)}.composer.windowed{width:100vw;height:100vh;max-width:none;max-height:none;border-radius:0;border:none}.composer.windowed .compose-editor{max-height:none}.compose-editor:focus{outline:2px solid var(--accent)}.compose-editor img{max-width:100%;height:auto}.compose-toolbar{display:flex;gap:4px;align-items:center;flex-wrap:wrap}.compose-toolbar button{background:var(--bg-hover);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:4px 9px;cursor:pointer;min-width:28px;font:inherit}.tpl-select{background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:4px;padding:4px 6px;font-size:12px;max-width:180px}.tpl-picker{position:relative;display:inline-block}.tpl-picker>button{background:var(--bg-hover);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:4px 9px;cursor:pointer;font:inherit}.tpl-menu{position:absolute;z-index:80;top:100%;left:0;margin-top:4px;min-width:210px;max-height:260px;overflow-y:auto;background:var(--bg-panel);border:1px solid var(--border);border-radius:4px;box-shadow:0 6px 18px #00000073}.tpl-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;cursor:pointer}.tpl-item:hover{background:var(--bg-hover)}.tpl-name{flex:1}.tpl-del{color:#e74c3c;font-weight:700;padding:0 4px;cursor:pointer}.tpl-del:hover{color:#c0392b}.tpl-empty{padding:8px 10px;color:var(--text-dim)}.settings-wrap{position:relative}.settings-pop{position:absolute;right:0;top:100%;margin-top:4px;z-index:80;background:var(--bg-panel);border:1px solid var(--border);border-radius:6px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;min-width:240px;box-shadow:0 6px 18px #00000073}.settings-pop label{display:flex;align-items:center;gap:6px;cursor:pointer}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.msg-snippet{color:#9a9a9a;font-size:12px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}html.light .msg-snippet{color:#9ca0a4}.compose-toolbar button:hover{background:var(--accent);color:#fff}.tb-sep{width:1px;height:18px;background:var(--border);margin:0 4px}.compose-atts{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}.compose-atts .att{background:#ffffff12;border:1px solid var(--border);border-radius:4px;padding:3px 8px;font-size:12px;display:inline-flex;align-items:center;gap:6px}.att-x{cursor:pointer;color:var(--text-dim)}.att-x:hover{color:#ff6b6b}.compose-footer{display:flex;align-items:center;gap:8px}.compose-footer .spacer{flex:1}.compose-footer button{background:transparent;color:var(--text);border:1px solid var(--border);border-radius:4px;padding:7px 14px;cursor:pointer}.compose-footer .primary{background:var(--accent);border-color:var(--accent);color:#fff}.compose-sig{color:var(--text-dim);display:flex;align-items:center;gap:6px;font-size:12px}.reading{display:flex;flex-direction:column}.read{display:flex;flex-direction:column;height:100%;padding:16px 20px 0;min-height:0}.read h2{margin:0 0 10px;font-size:18px}.meta{color:var(--text-dim);line-height:1.7}.meta b{color:var(--text)}.ext-banner{margin:10px 0 0;padding:8px 12px;border-radius:4px;background:#ffc1071f;border:1px solid rgba(255,193,7,.4);color:#ffd24d;font-size:12px}.attachments{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.att{background:#ffffff12;border:1px solid var(--border);border-radius:4px;padding:4px 10px;font-size:12px;display:inline-flex;align-items:center;gap:6px}.att-size{color:var(--text-dim)}.att-name{cursor:pointer}.att-name:hover{text-decoration:underline;color:var(--accent)}.att-dl{cursor:pointer;color:var(--text-dim)}.att-dl:hover{color:var(--accent)}.img-preview{max-width:92vw;max-height:90vh;border-radius:4px;box-shadow:0 0 30px #0009}.att-popup{position:fixed;z-index:60;background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;padding:8px;box-shadow:0 6px 24px #0000008c;pointer-events:none}.att-popup-title{font-size:12px;color:var(--text-dim);margin-bottom:6px;max-width:380px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.att-popup-img{max-width:380px;max-height:440px;display:block;background:#fff;border-radius:3px}.att-popup-frame{width:380px;height:440px;border:none;background:#fff;border-radius:3px}.att-popup-none{padding:18px;color:var(--text-dim);font-size:12px;max-width:320px}.read-cats{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 4px}.read-cat{display:inline-flex;align-items:center;gap:6px}.cat-x{cursor:pointer;font-weight:700;opacity:.75;padding:0 2px}.cat-x:hover{opacity:1}.mail-iframe{flex:1;min-height:240px;width:100%;margin-top:12px;border:none;background:#fff;border-radius:4px 4px 0 0}.dim{color:var(--text-dim)}.pad{padding:24px}.error{color:#ff8a80;padding:16px}code{background:#ffffff14;padding:1px 4px;border-radius:3px}.link-btn{background:none;border:none;color:var(--accent);cursor:pointer;text-decoration:underline;margin-left:8px;font:inherit;padding:0}.link-btn.light{color:#fff;font-weight:600}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:50}.modal{background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;padding:18px 20px;width:360px;max-height:70vh;display:flex;flex-direction:column}.modal h3{margin:0 0 12px}.cat-list{overflow-y:auto;display:flex;flex-direction:column;gap:6px;max-height:320px}.cat-opt{display:flex;align-items:center;gap:8px;cursor:pointer}.cat-dot{width:11px;height:11px;border-radius:2px;display:inline-block;flex-shrink:0}.cat-add{display:flex;gap:6px;margin:12px 0}.cat-add input{flex:1;background:var(--bg);border:1px solid var(--border);border-radius:4px;color:var(--text);padding:6px 8px}.cat-add button,.modal-actions button{background:transparent;color:var(--text);border:1px solid var(--border);border-radius:4px;padding:6px 12px;cursor:pointer}.modal-actions{display:flex;justify-content:flex-end;gap:8px}.modal-actions .primary{background:var(--accent);border-color:var(--accent);color:#fff}.footer{grid-area:footer;background:var(--bg-panel);border-top:1px solid var(--border);display:flex;align-items:center;padding:0 12px}.statusbar{display:flex;align-items:center;gap:8px;color:var(--text-dim);font-size:12px}.statusbar .sep{opacity:.4}.dot{width:8px;height:8px;border-radius:50%;display:inline-block}.dot.ok{background:#4caf50}.dot.ko{background:#e74c3c}