:root { 
            --bg-primary:#1a1a2e; --bg-secondary:#16213e; --bg-card:#1f2937; 
            --text-primary:#f5f5f5; --text-secondary:#94a3b8; 
            --accent-notify:#4ade80; --accent-show:#38bdf8; --accent-fyi:#a855f7; 
            --accent-archive:#64748b; --accent-trash:#f87171; --accent-new:#fbbf24;
            --accent-reply:#f59e0b;
            --border:#0f3460; 
        }
        * { margin:0; padding:0; box-sizing:border-box; }
        body { font-family:'DM Sans',sans-serif; background:var(--bg-primary); color:var(--text-primary); min-height:100vh; padding:12px; padding-bottom:100px; max-width:100vw; overflow-x:hidden; }
        .container { max-width:100%; margin:0 auto; overflow-x:hidden; }
        header { text-align:center; padding:30px 0 20px; }
        h1 { font-family:'DM Serif Display',serif; font-size:2.2rem; font-weight:400; margin-bottom:6px; }
        .tagline { color:var(--text-secondary); font-size:0.95rem; }

        /* Auth */
        .auth-screen { text-align:center; padding:60px 20px; }
        .connect-btn { background:linear-gradient(135deg,#e94560,#0f3460); color:white; border:none; padding:16px 40px; font-size:1.1rem; font-family:'DM Sans',sans-serif; font-weight:600; border-radius:50px; cursor:pointer; }
        .auth-note { margin-top:20px; color:var(--text-secondary); font-size:0.9rem; }

        /* User bar */
        .user-bar { display:none; justify-content:space-between; align-items:center; padding:10px 14px; background:var(--bg-secondary); border-radius:10px; margin-bottom:16px; border:1px solid var(--border); }
        .user-info { display:flex; align-items:center; gap:10px; font-size:0.85rem; color:var(--text-secondary); }
        .user-avatar { width:28px; height:28px; border-radius:50%; }
        .sign-out-btn { background:none; border:1px solid var(--border); color:var(--text-secondary); padding:5px 10px; font-size:0.75rem; font-family:'DM Sans',sans-serif; border-radius:6px; cursor:pointer; }

        /* Main layout */
        .app-screen { display:none; }
        
        /* Tab bar */
        .tab-bar { display:flex; gap:8px; margin-bottom:20px; }
        .tab-btn { flex:1; padding:12px; background:var(--bg-card); border:2px solid var(--border); color:var(--text-secondary); font-family:'DM Sans',sans-serif; font-weight:600; font-size:0.9rem; border-radius:12px; cursor:pointer; transition:all 0.2s; position:relative; }
        .tab-btn.active { border-color:var(--accent-notify); color:var(--accent-notify); }
        .tab-btn:hover { background:var(--bg-secondary); }
        .tab-badge { position:absolute; top:-6px; right:-6px; background:var(--accent-reply); color:var(--bg-primary); font-size:0.7rem; font-weight:700; padding:2px 6px; border-radius:10px; }

        /* Search bar */
        .search-bar { display:flex; gap:10px; margin-bottom:20px; }
        .search-input { flex:1; padding:14px 18px; background:var(--bg-card); border:2px solid var(--border); color:var(--text-primary); font-family:'DM Sans',sans-serif; font-size:1rem; border-radius:12px; outline:none; }
        .search-input:focus { border-color:var(--accent-show); }
        .search-input::placeholder { color:var(--text-secondary); }
        .search-btn { padding:14px 20px; background:var(--accent-show); border:none; color:var(--bg-primary); font-family:'DM Sans',sans-serif; font-weight:600; font-size:0.9rem; border-radius:12px; cursor:pointer; }
        .search-btn:disabled { opacity:0.6; cursor:not-allowed; }

        /* Check email button */
        .check-btn { width:100%; background:var(--bg-card); border:2px solid var(--border); color:var(--text-primary); padding:18px; font-size:1rem; font-family:'DM Sans',sans-serif; font-weight:600; border-radius:14px; cursor:pointer; transition:all 0.2s; margin-bottom:24px; }
        .check-btn:hover { border-color:var(--accent-notify); background:var(--bg-secondary); }
        .check-btn:disabled { opacity:0.6; cursor:not-allowed; }

        /* Section labels */
        .section-label { font-size:0.8rem; text-transform:uppercase; letter-spacing:1px; color:var(--text-secondary); margin-bottom:10px; margin-top:20px; padding-left:4px; }
        .section-label:first-child { margin-top:0; }
        .section-label.reply-later { color:var(--accent-reply); }

        /* Sender cards */
        .sender-list { display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }
        .sender-card { background:var(--bg-card); border-radius:14px; padding:14px 16px; cursor:pointer; transition:all 0.2s; border-left:4px solid transparent; }
        .sender-card:hover { background:var(--bg-secondary); }
        .sender-card.notify { border-left-color:var(--accent-notify); }
        .sender-card.show { border-left-color:var(--accent-show); }
        .sender-card.fyi { border-left-color:var(--accent-fyi); }
        .sender-card.archive { border-left-color:var(--accent-archive); }
        .sender-card.new { border-left-color:var(--accent-new); }
        .sender-card.trash { border-left-color:var(--accent-trash); }
        .sender-card.reply-later { border-left-color:var(--accent-reply); background:rgba(245,158,11,0.1); }
        .sender-card-header { display:flex; align-items:center; gap:14px; }
        .avatar { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:1rem; flex-shrink:0; }
        .avatar.notify { background:rgba(74,222,128,0.2); color:var(--accent-notify); }
        .avatar.show { background:rgba(56,189,248,0.2); color:var(--accent-show); }
        .avatar.fyi { background:rgba(168,85,247,0.2); color:var(--accent-fyi); }
        .avatar.archive { background:rgba(100,116,139,0.2); color:var(--accent-archive); }
        .avatar.trash { background:rgba(239,68,68,0.2); color:var(--accent-trash); }
        .avatar.new { background:rgba(251,191,36,0.2); color:var(--accent-new); }
        .avatar.reply-later { background:rgba(245,158,11,0.2); color:var(--accent-reply); }
        .sender-info { flex:1; min-width:0; }
        .sender-name { font-weight:600; font-size:0.95rem; margin-bottom:2px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
        .sender-email { color:var(--text-secondary); font-size:0.8rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .message-count { background:var(--bg-secondary); padding:5px 10px; border-radius:16px; font-size:0.8rem; color:var(--text-secondary); text-align:center; }
        .message-time { font-size:0.7rem; color:var(--text-secondary); margin-top:2px; opacity:0.8; }
        .quick-cat-btn { background:var(--bg-secondary); border:1px solid var(--border); color:var(--accent-new); width:36px; height:36px; border-radius:10px; font-size:1rem; cursor:pointer; flex-shrink:0; margin-right:8px; }
        .quick-cat-btn:hover { border-color:var(--accent-new); background:rgba(251,191,36,0.1); }
        .section-header { display:flex; align-items:center; gap:10px; padding:16px 8px 8px; font-weight:600; font-size:0.9rem; color:var(--text-secondary); }
        .section-dot { width:10px; height:10px; border-radius:50%; }
        .section-dot.notify { background:var(--accent-notify); }
        .section-dot.show { background:var(--accent-show); }
        .section-dot.fyi { background:var(--accent-fyi); }
        .section-dot.archive { background:var(--accent-archive); }
        .section-dot.trash { background:var(--accent-trash); }
        .sync-btn.sign-out { background:transparent; border-color:var(--accent-trash); color:var(--accent-trash); }
        .sync-btn.sign-out:hover { background:rgba(239,68,68,0.1); }
        .badge { font-size:0.65rem; text-transform:uppercase; letter-spacing:0.5px; padding:3px 6px; border-radius:4px; font-weight:600; }
        .badge.new { background:rgba(251,191,36,0.2); color:var(--accent-new); }
        .badge.reply-later { background:rgba(245,158,11,0.2); color:var(--accent-reply); }
        .sender-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
        .sender-tag { font-size:0.7rem; padding:3px 8px; background:var(--bg-secondary); border-radius:6px; color:var(--text-secondary); }
        .reply-later-subject { font-size:0.8rem; color:var(--text-secondary); margin-top:4px; font-style:italic; }
        
        /* Watchlist styles */
        .watchlist-section { margin-bottom:16px; }
        .watchlist-header { display:flex; align-items:center; gap:8px; }
        .watchlist-toggle { margin-left:auto; font-size:0.75rem; }
        .watchlist-items { display:flex; flex-direction:column; gap:8px; }
        .replied-badge { background:var(--accent-notify); color:var(--bg-primary); padding:2px 8px; border-radius:10px; font-size:0.7rem; font-weight:600; animation:pulse 1s ease-in-out infinite; }
        @keyframes pulse { 0%, 100% { opacity:1; } 50% { opacity:0.7; } }
        .watchlist-replied { border-left:3px solid var(--accent-notify) !important; background:rgba(74,222,128,0.05) !important; }
        .watchlist-waiting { border-left:3px solid var(--accent-new) !important; }
        .watchlist-remove-btn { background:none; border:none; color:var(--text-secondary); font-size:1rem; cursor:pointer; padding:8px; opacity:0.6; transition:all 0.2s; }
        .watchlist-remove-btn:hover { opacity:1; color:var(--accent-trash); }

        /* Todo styles */
        .todo-badge { background:rgba(168,85,247,0.2); color:var(--accent-fyi); }
        .todo-note-preview { font-size:0.75rem; color:var(--text-secondary); margin-top:4px; font-style:italic; }
        .priority-badge { font-size:0.65rem; padding:2px 6px; border-radius:3px; margin-left:6px; font-weight:600; }
        .priority-high { background:rgba(248,113,113,0.2); color:var(--accent-trash); }
        .priority-medium { background:rgba(251,191,36,0.2); color:var(--accent-new); }
        .priority-low { background:rgba(100,116,139,0.2); color:var(--accent-archive); }
        .later-todo-btn { position:relative; }
        .later-todo-btn.state-later { background:var(--accent-reply); color:var(--bg-primary); }
        .later-todo-btn.state-todo { background:var(--accent-fyi); color:var(--bg-primary); }
        .later-todo-btn.state-both { background:linear-gradient(135deg, var(--accent-reply) 50%, var(--accent-fyi) 50%); color:var(--bg-primary); }
        .todo-completed { opacity:0.5; text-decoration:line-through; }
        .todo-note-display { background:var(--bg-secondary); padding:12px; border-radius:8px; margin:12px 0; border-left:3px solid var(--accent-fyi); }
        .todo-note-text { color:var(--text-primary); line-height:1.5; white-space:pre-wrap; }
        .todo-actions { display:flex; gap:8px; margin-top:8px; }
        .todo-complete-btn { background:var(--accent-notify); color:var(--bg-primary); padding:6px 12px; border:none; border-radius:6px; font-family:'DM Sans',sans-serif; font-size:0.8rem; font-weight:600; cursor:pointer; }
        .todo-edit-btn { background:var(--bg-card); color:var(--text-primary); padding:6px 12px; border:1px solid var(--border); border-radius:6px; font-family:'DM Sans',sans-serif; font-size:0.8rem; cursor:pointer; }
        .completed-todos-section { margin-top:16px; padding-top:16px; border-top:1px solid var(--border); }
        .completed-toggle { color:var(--text-secondary); font-size:0.85rem; cursor:pointer; padding:8px 0; }
        .completed-toggle:hover { color:var(--text-primary); }
        .priority-btn { padding:10px 16px; background:var(--bg-secondary); border:2px solid var(--border); color:var(--text-secondary); font-family:'DM Sans',sans-serif; font-weight:600; font-size:0.85rem; border-radius:8px; cursor:pointer; transition:all 0.2s; }
        .priority-btn:hover { border-color:var(--text-secondary); }
        .priority-btn.active { border-width:2px; }

        /* Who tab styles */
        .who-filter-bar { display:flex; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
        .who-filter-input { flex:1; min-width:150px; padding:10px 14px; background:var(--bg-secondary); border:1px solid var(--border); border-radius:10px; color:var(--text-primary); font-family:'DM Sans',sans-serif; font-size:0.9rem; }
        .who-filter-input:focus { outline:none; border-color:var(--accent-show); }
        .who-filter-count { color:var(--text-secondary); font-size:0.8rem; white-space:nowrap; }
        .tags-toggle-btn { padding:10px 14px; background:var(--bg-secondary); border:1px solid var(--border); border-radius:10px; color:var(--text-secondary); font-family:'DM Sans',sans-serif; font-size:0.85rem; cursor:pointer; white-space:nowrap; }
        .tags-toggle-btn:hover { border-color:var(--accent-fyi); color:var(--accent-fyi); }
        .tags-toggle-btn.active { border-color:var(--accent-fyi); color:var(--accent-fyi); background:rgba(168,85,247,0.1); }
        .tags-filter-panel { display:none; margin-bottom:12px; padding:12px; background:var(--bg-secondary); border-radius:10px; }
        .tags-filter-panel.show { display:block; }
        .tags-filter-list { display:flex; flex-wrap:wrap; gap:8px; }
        .tag-filter-chip { padding:6px 12px; background:var(--bg-card); border:1px solid var(--border); border-radius:16px; color:var(--text-secondary); font-size:0.8rem; cursor:pointer; transition:all 0.2s; }
        .tag-filter-chip:hover { border-color:var(--accent-fyi); color:var(--accent-fyi); }
        .tag-filter-chip.active { background:var(--accent-fyi); border-color:var(--accent-fyi); color:var(--bg-primary); }
        .tag-filter-chip .tag-count { opacity:0.7; margin-left:4px; }
        .tag-email-action { display:flex; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }
        .tag-email-btn { padding:8px 16px; background:var(--accent-notify); border:none; border-radius:8px; color:var(--bg-primary); font-family:'DM Sans',sans-serif; font-weight:600; font-size:0.85rem; cursor:pointer; }
        .tag-email-btn:hover { opacity:0.9; }
        .tag-email-btn.bcc { background:var(--accent-show); }
        .who-section { margin-bottom:20px; }
        .who-section-header { font-size:0.9rem; font-weight:600; color:var(--text-secondary); margin-bottom:10px; padding:8px 0; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; cursor:pointer; }
        .who-section-header:hover { color:var(--text-primary); }
        .who-count { background:var(--bg-secondary); padding:2px 8px; border-radius:10px; font-size:0.75rem; }
        .who-expand-hint { margin-left:auto; font-size:0.75rem; color:var(--text-secondary); }
        .who-list { display:flex; flex-direction:column; gap:8px; }
        .who-card { background:var(--bg-card); border-radius:12px; padding:12px 14px; transition:all 0.2s; display:flex; align-items:center; gap:12px; border-left:3px solid transparent; }
        .who-card:hover { background:var(--bg-secondary); }
        .who-card.notify { border-left-color:var(--accent-notify); }
        .who-card.show { border-left-color:var(--accent-show); }
        .who-card.fyi { border-left-color:var(--accent-fyi); }
        .who-card.archive { border-left-color:var(--accent-archive); }
        .who-card.trash { border-left-color:var(--accent-trash); }
        .who-info { flex:1; min-width:0; cursor:pointer; }
        .who-name { font-weight:600; font-size:0.9rem; margin-bottom:2px; }
        .who-email { color:var(--text-secondary); font-size:0.75rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .who-actions { display:flex; gap:6px; }
        .who-action-btn { background:var(--bg-secondary); border:1px solid var(--border); color:var(--text-secondary); width:32px; height:32px; border-radius:8px; font-size:0.85rem; cursor:pointer; display:flex; align-items:center; justify-content:center; }
        .who-action-btn:hover { border-color:var(--accent-show); color:var(--accent-show); }
        .who-action-btn.cat:hover { border-color:var(--accent-notify); color:var(--accent-notify); }

        /* Expand button for collapsible sections */
        .expand-btn { width:100%; padding:10px; background:var(--bg-secondary); border:1px solid var(--border); color:var(--accent-reply); font-family:'DM Sans',sans-serif; font-weight:600; font-size:0.8rem; border-radius:10px; cursor:pointer; text-align:center; margin-top:4px; }
        .expand-btn:hover { border-color:var(--accent-reply); }

        /* Collapsed sections */
        .collapsed-section { background:var(--bg-secondary); border-radius:10px; padding:14px 16px; margin-top:16px; cursor:pointer; }
        .collapsed-header { display:flex; align-items:center; gap:10px; }
        .collapsed-icon { font-size:1.1rem; }
        .collapsed-text { flex:1; color:var(--text-secondary); font-size:0.85rem; }
        .collapsed-text strong { color:var(--text-primary); }
        .expand-hint { color:var(--text-secondary); font-size:0.75rem; transition:transform 0.2s; }
        .collapsed-section.expanded .expand-hint { transform:rotate(180deg); }
        .collapsed-list { display:none; margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }
        .collapsed-section.expanded .collapsed-list { display:block; }
        .collapsed-item { padding:8px 0; color:var(--text-secondary); font-size:0.85rem; cursor:pointer; display:flex; justify-content:space-between; }
        .collapsed-item:hover { color:var(--text-primary); }

        /* Message view */
        .message-view { display:none; }
        .message-nav { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
        .back-btn { background:none; border:none; color:var(--text-secondary); font-family:'DM Sans',sans-serif; font-size:0.9rem; cursor:pointer; padding:8px 0; }
        .back-btn:hover { color:var(--text-primary); }
        .next-btn { color:var(--accent-notify); }
        .next-btn:hover { color:var(--accent-notify); opacity:0.8; }
        .message-header { display:flex; flex-direction:column; gap:12px; margin-bottom:16px; padding:14px; background:var(--bg-card); border-radius:14px; }
        .message-header-top { display:flex; align-items:center; gap:12px; }
        .message-header .avatar { width:48px; height:48px; font-size:1.1rem; flex-shrink:0; }
        .message-header .sender-name { font-size:1rem; margin-bottom:2px; }
        .message-header-info { flex:1; min-width:0; }
        .message-header-actions { display:flex; gap:8px; flex-wrap:wrap; }
        .status-btn { padding:8px 12px; border:none; border-radius:8px; font-family:'DM Sans',sans-serif; font-weight:600; font-size:0.75rem; cursor:pointer; }
        .status-btn.change { background:var(--bg-secondary); color:var(--text-secondary); border:1px solid var(--border); }
        .message-item { background:var(--bg-card); border-radius:12px; padding:14px; margin-bottom:10px; cursor:pointer; transition:all 0.2s; position:relative; }
        .message-item:hover { background:var(--bg-secondary); }
        .message-item.flagged { border-left:3px solid var(--accent-reply); }
        .message-subject { font-weight:600; margin-bottom:4px; font-size:0.9rem; padding-right:40px; }
        .message-preview { color:var(--text-secondary); font-size:0.85rem; line-height:1.4; }
        .message-date { color:var(--text-secondary); font-size:0.75rem; margin-top:8px; }
        .message-quick-actions { position:absolute; top:12px; right:12px; display:flex; gap:6px; }
        .quick-action-btn { background:var(--bg-secondary); border:1px solid var(--border); color:var(--text-secondary); width:32px; height:32px; border-radius:8px; font-size:0.9rem; cursor:pointer; display:flex; align-items:center; justify-content:center; }
        .quick-action-btn:hover { border-color:var(--accent-reply); color:var(--accent-reply); }
        .quick-action-btn.active { background:var(--accent-reply); border-color:var(--accent-reply); color:var(--bg-primary); }
        .quick-action-btn.confirm { border-color:var(--accent-new); color:var(--accent-new); background:rgba(251,191,36,0.15); }
        .quick-action-btn.queued { border-color:var(--accent-notify); color:var(--accent-notify); background:rgba(74,222,128,0.15); }
        .quick-action-btn.archive-btn:hover { border-color:var(--accent-archive); color:var(--accent-archive); }
        .quick-action-btn.trash-btn:hover { border-color:var(--accent-trash); color:var(--accent-trash); }
        .message-item.queued-archive { opacity:0.5; background:rgba(74,222,128,0.05); }
        .message-item.queued-trash { opacity:0.5; background:rgba(248,113,113,0.05); text-decoration:line-through; }
        .message-actions { display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
        .msg-action-btn { flex:1; min-width:80px; padding:10px; border:2px solid var(--border); background:var(--bg-card); color:var(--text-primary); border-radius:10px; font-family:'DM Sans',sans-serif; font-weight:600; font-size:0.8rem; cursor:pointer; }
        .msg-action-btn:hover { border-color:var(--accent-notify); }
        .msg-action-btn.reply-later { border-color:var(--accent-reply); color:var(--accent-reply); }
        .msg-action-btn.reply-later.active { background:var(--accent-reply); color:var(--bg-primary); }
        .msg-action-btn.confirm { border-color:var(--accent-trash); color:var(--accent-trash); background:rgba(248,113,113,0.1); }
        .msg-action-btn.trash-all { border-color:var(--accent-trash); color:var(--accent-trash); }
        .msg-action-btn.trash-all:hover { background:var(--accent-trash); color:var(--bg-primary); }
        
        /* Top action bar for full message view */
        .top-actions { display:flex; gap:8px; margin-bottom:16px; }
        .top-action-btn { flex:1; padding:12px; border:2px solid var(--border); background:var(--bg-card); color:var(--text-primary); border-radius:10px; font-family:'DM Sans',sans-serif; font-weight:600; font-size:0.85rem; cursor:pointer; text-align:center; }
        .top-action-btn:hover { border-color:var(--accent-notify); }
        .top-action-btn.reply-later { border-color:var(--accent-reply); color:var(--accent-reply); }
        .top-action-btn.reply-later.active { background:var(--accent-reply); color:var(--bg-primary); border-color:var(--accent-reply); }
        .top-action-btn.watchlist { border-color:var(--accent-new); color:var(--accent-new); }
        .top-action-btn.watchlist.active { background:var(--accent-new); color:var(--bg-primary); border-color:var(--accent-new); }
        .top-action-btn.todo { border-color:var(--accent-fyi); color:var(--accent-fyi); }
        .top-action-btn.todo.active { background:var(--accent-fyi); color:var(--bg-primary); border-color:var(--accent-fyi); }
        .top-action-btn.archive { border-color:var(--accent-archive); color:var(--accent-archive); }
        .top-action-btn.archive:hover { background:var(--accent-archive); color:var(--bg-primary); }
        .top-action-btn.forward { border-color:var(--accent-show); color:var(--accent-show); }
        .top-action-btn.forward:hover { background:var(--accent-show); color:var(--bg-primary); }

        /* Full message - improved readability */
        .full-message { background:var(--bg-card); border-radius:14px; padding:16px; margin-bottom:16px; }
        .full-message-header { border-bottom:1px solid var(--border); padding-bottom:14px; margin-bottom:16px; }
        .full-message-subject { font-size:1.1rem; font-weight:600; margin-bottom:8px; line-height:1.3; }
        .full-message-meta { font-size:0.8rem; color:var(--text-secondary); line-height:1.6; }
        .full-message-body { line-height:1.7; font-size:0.95rem; overflow-wrap:break-word; word-break:break-word; }
        .full-message-body img { max-width:100%; height:auto; }
        .full-message-body blockquote, .full-message-body .gmail_quote { 
            border-left:3px solid var(--border); 
            padding-left:12px; 
            margin:12px 0; 
            color:var(--text-secondary);
            font-size:0.85rem;
        }
        .full-message-body p { margin-bottom:1em; }
        .full-message-body a { color:var(--accent-show); }

        /* Email zoom controls */
        .zoom-controls { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:12px; padding:8px; background:var(--bg-secondary); border-radius:10px; }
        .zoom-btn { width:36px; height:36px; border-radius:8px; border:1px solid var(--border); background:var(--bg-card); color:var(--text-primary); font-size:1.2rem; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; }
        .zoom-btn:hover { border-color:var(--accent-show); color:var(--accent-show); }
        .zoom-btn:active { background:var(--bg-secondary); }
        .zoom-level { font-size:0.85rem; color:var(--text-secondary); min-width:50px; text-align:center; }
        .email-zoom-wrapper { overflow:auto; }
        .email-zoom-content { transform-origin:top left; transition:transform 0.15s ease-out; }

        /* Reply box */
        .reply-section { background:var(--bg-card); border-radius:14px; padding:14px; margin-bottom:16px; border:2px solid var(--border); }
        .reply-section.focused { border-color:var(--accent-notify); }
        .reply-label { font-size:0.8rem; color:var(--text-secondary); margin-bottom:8px; text-transform:uppercase; letter-spacing:0.5px; }
        .reply-textarea { width:100%; min-height:100px; padding:12px; background:var(--bg-secondary); border:none; border-radius:10px; color:var(--text-primary); font-family:'DM Sans',sans-serif; font-size:0.9rem; line-height:1.5; resize:vertical; outline:none; }
        .reply-textarea::placeholder { color:var(--text-secondary); }
        .reply-actions { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
        .reply-btn { padding:10px 16px; border:none; border-radius:10px; font-family:'DM Sans',sans-serif; font-weight:600; font-size:0.85rem; cursor:pointer; }
        .reply-btn.send { background:var(--accent-notify); color:var(--bg-primary); flex:1; min-width:80px; }
        .reply-btn.send:disabled { opacity:0.5; cursor:not-allowed; }
        .reply-btn.reply-all { background:var(--accent-show); }
        .reply-btn.draft { background:var(--bg-secondary); color:var(--text-secondary); border:1px solid var(--border); }
        .reply-btn.draft:hover { border-color:var(--accent-fyi); color:var(--accent-fyi); }

        /* Compose button */
        .compose-btn { position:fixed; bottom:80px; right:20px; width:56px; height:56px; border-radius:50%; background:var(--accent-notify); border:none; color:var(--bg-primary); font-size:1.5rem; cursor:pointer; z-index:100; box-shadow:0 4px 12px rgba(74,222,128,0.3); }
        .compose-btn:hover { transform:scale(1.05); }

        /* Compose screen */
        .compose-screen { display:none; }
        .compose-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
        .compose-title { font-size:1.2rem; font-weight:600; }
        .compose-close { background:none; border:none; color:var(--text-secondary); font-size:1.5rem; cursor:pointer; }
        .compose-field { margin-bottom:16px; }
        .compose-field label { display:block; font-size:0.8rem; color:var(--text-secondary); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.5px; }
        .compose-field input, .compose-field textarea { width:100%; padding:12px; background:var(--bg-card); border:2px solid var(--border); color:var(--text-primary); font-family:'DM Sans',sans-serif; font-size:0.95rem; border-radius:10px; outline:none; }
        .compose-field input:focus, .compose-field textarea:focus { border-color:var(--accent-show); }
        .compose-field textarea { min-height:200px; resize:vertical; line-height:1.6; }
        .compose-actions { display:flex; gap:10px; margin-top:20px; }
        .compose-delete-btn { padding:14px 16px; background:var(--bg-secondary); border:1px solid var(--accent-trash); color:var(--accent-trash); font-family:'DM Sans',sans-serif; font-weight:600; font-size:0.85rem; border-radius:10px; cursor:pointer; }
        .compose-delete-btn:hover { background:var(--accent-trash); color:var(--bg-primary); }
        .compose-draft-btn { padding:14px 20px; background:var(--bg-secondary); border:1px solid var(--border); color:var(--text-secondary); font-family:'DM Sans',sans-serif; font-weight:600; font-size:0.9rem; border-radius:10px; cursor:pointer; }
        .compose-draft-btn:hover { border-color:var(--accent-fyi); color:var(--accent-fyi); }
        .compose-send-btn { flex:1; padding:14px; background:var(--accent-notify); border:none; color:var(--bg-primary); font-family:'DM Sans',sans-serif; font-weight:600; font-size:1rem; border-radius:10px; cursor:pointer; }
        .compose-send-btn:disabled { opacity:0.5; cursor:not-allowed; }

        /* Signature */
        .signature-input { width:100%; min-height:80px; padding:10px; background:var(--bg-secondary); border:1px solid var(--border); border-radius:8px; color:var(--text-primary); font-family:'DM Sans',sans-serif; font-size:0.85rem; resize:vertical; }
        .signature-input:focus { outline:none; border-color:var(--accent-fyi); }
        .signature-hint { font-size:0.75rem; color:var(--text-secondary); margin-top:6px; }

        /* Label Sync */
        .label-sync-hint { font-size:0.75rem; color:var(--text-secondary); margin-bottom:12px; }
        .label-sync-grid { display:flex; flex-direction:column; gap:8px; }
        .label-sync-row { display:flex; justify-content:space-between; align-items:center; padding:8px 10px; background:var(--bg-secondary); border-radius:8px; }
        .label-sync-category { font-size:0.85rem; }
        .label-sync-toggle { position:relative; display:inline-block; width:44px; height:24px; }
        .label-sync-toggle input { opacity:0; width:0; height:0; }
        .toggle-slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:var(--border); transition:0.3s; border-radius:24px; }
        .toggle-slider:before { position:absolute; content:""; height:18px; width:18px; left:3px; bottom:3px; background-color:var(--text-secondary); transition:0.3s; border-radius:50%; }
        .label-sync-toggle input:checked + .toggle-slider { background-color:var(--accent-notify); }
        .label-sync-toggle input:checked + .toggle-slider:before { transform:translateX(20px); background-color:white; }

        /* Autocomplete */
        .autocomplete-wrapper { position:relative; }
        .autocomplete-list { position:absolute; top:100%; left:0; right:0; background:var(--bg-card); border:1px solid var(--border); border-radius:10px; max-height:200px; overflow-y:auto; z-index:50; display:none; }
        .autocomplete-list.show { display:block; }
        .autocomplete-item { padding:10px 14px; cursor:pointer; display:flex; align-items:center; gap:10px; }
        .autocomplete-item:hover { background:var(--bg-secondary); }
        .autocomplete-item-name { font-weight:500; font-size:0.9rem; }
        .autocomplete-item-email { font-size:0.8rem; color:var(--text-secondary); }
        .autocomplete-no-results { padding:10px 14px; color:var(--text-secondary); font-size:0.85rem; }

        /* Settings sync section */
        .settings-section { margin-top:16px; padding-top:16px; border-top:1px solid var(--border); }
        .settings-section-title { font-size:0.8rem; color:var(--text-secondary); margin-bottom:10px; text-transform:uppercase; letter-spacing:0.5px; }
        .sync-btn { width:100%; padding:10px; background:var(--bg-secondary); border:1px solid var(--border); color:var(--text-primary); font-family:'DM Sans',sans-serif; font-weight:600; font-size:0.85rem; border-radius:8px; cursor:pointer; margin-bottom:8px; }
        .sync-btn:hover { border-color:var(--accent-show); }
        .sync-btn:disabled { opacity:0.5; cursor:not-allowed; }
        .sync-status { font-size:0.75rem; color:var(--text-secondary); text-align:center; }

        /* Debug panel */
        .debug-panel { display:none; position:fixed; bottom:80px; left:12px; right:12px; background:var(--bg-card); border:1px solid var(--border); border-radius:14px; padding:16px; max-height:50vh; z-index:150; }
        .debug-panel.show { display:block; }
        .debug-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-weight:600; }
        .debug-close { background:none; border:none; color:var(--text-secondary); font-size:1.2rem; cursor:pointer; }
        .debug-content { background:var(--bg-primary); border-radius:8px; padding:10px; max-height:30vh; overflow-y:auto; font-family:monospace; font-size:0.75rem; line-height:1.4; }
        .debug-entry { padding:4px 0; border-bottom:1px solid var(--border); }
        .debug-entry:last-child { border-bottom:none; }
        .debug-entry.success { color:var(--accent-notify); }
        .debug-entry.fail { color:var(--accent-trash); }
        .debug-entry .time { color:var(--text-secondary); margin-right:8px; }

        /* Status picker modal */
        .modal-overlay { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.7); z-index:200; align-items:center; justify-content:center; padding:20px; }
        .modal-overlay.show { display:flex; }
        .modal { background:var(--bg-card); border-radius:16px; padding:24px; width:100%; max-width:360px; max-height:90vh; overflow-y:auto; position:relative; }
        .modal-close { position:absolute; top:12px; right:12px; background:none; border:none; color:var(--text-secondary); font-size:1.5rem; cursor:pointer; padding:4px 8px; line-height:1; }
        .modal-close:hover { color:var(--text-primary); }
        .modal-title { font-weight:600; font-size:1.1rem; margin-bottom:8px; }
        .modal-subtitle { color:var(--text-secondary); font-size:0.85rem; margin-bottom:20px; }
        .modal-name-edit { margin-bottom:20px; }
        .modal-name-input { width:100%; padding:10px 12px; background:var(--bg-secondary); border:1px solid var(--border); border-radius:8px; color:var(--text-primary); font-family:'DM Sans',sans-serif; font-size:1rem; font-weight:600; }
        .modal-name-input:focus { outline:none; border-color:var(--accent-notify); }
        .modal-email { color:var(--text-secondary); font-size:0.8rem; margin-top:6px; }
        .status-options { display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }
        .status-option { display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--bg-secondary); border:2px solid transparent; border-radius:10px; cursor:pointer; transition:all 0.2s; }
        .status-option:hover { border-color:var(--border); }
        .status-option.selected { border-color:var(--accent-notify); }
        .status-dot { width:12px; height:12px; border-radius:50%; }
        .status-dot.notify { background:var(--accent-notify); }
        .status-dot.show { background:var(--accent-show); }
        .status-dot.fyi { background:var(--accent-fyi); }
        .status-dot.archive { background:var(--accent-archive); }
        .status-dot.trash { background:var(--accent-trash); }
        .status-option-text { flex:1; }
        .status-option-name { font-weight:600; font-size:0.9rem; }
        .status-option-desc { font-size:0.75rem; color:var(--text-secondary); }
        .tag-section { margin-bottom:20px; }
        .tag-label { font-size:0.8rem; color:var(--text-secondary); margin-bottom:8px; }
        .tag-input-row { display:flex; gap:8px; }
        .tag-input-wrapper { flex:1; position:relative; }
        .tag-input { width:100%; padding:10px 12px; background:var(--bg-secondary); border:1px solid var(--border); color:var(--text-primary); font-family:'DM Sans',sans-serif; font-size:0.85rem; border-radius:8px; outline:none; box-sizing:border-box; }
        .tag-input:focus { border-color:var(--accent-show); }
        .tag-suggestions { display:none; position:absolute; top:100%; left:0; right:0; background:var(--bg-card); border:1px solid var(--border); border-radius:8px; max-height:150px; overflow-y:auto; z-index:10; margin-top:4px; }
        .tag-suggestions.show { display:block; }
        .tag-suggestion { padding:8px 12px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-size:0.85rem; }
        .tag-suggestion:hover { background:var(--bg-secondary); }
        .tag-suggestion-count { color:var(--text-secondary); font-size:0.75rem; }
        .tag-add-btn { padding:10px 14px; background:var(--bg-secondary); border:1px solid var(--border); color:var(--text-primary); font-family:'DM Sans',sans-serif; font-weight:600; font-size:0.85rem; border-radius:8px; cursor:pointer; }
        .current-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
        .current-tag { display:flex; align-items:center; gap:4px; font-size:0.75rem; padding:4px 8px; background:var(--accent-fyi); color:white; border-radius:6px; }
        .current-tag button { background:none; border:none; color:white; cursor:pointer; font-size:0.85rem; padding:0; margin-left:2px; }
        .modal-actions { display:flex; gap:10px; flex-wrap:wrap; }
        .modal-btn { flex:1; padding:12px; border:none; border-radius:10px; font-family:'DM Sans',sans-serif; font-weight:600; font-size:0.9rem; cursor:pointer; }
        .modal-btn.cancel { background:var(--bg-secondary); color:var(--text-secondary); }
        .modal-btn.save { background:var(--accent-notify); color:var(--bg-primary); }
        .modal-btn.delete { flex-basis:100%; background:transparent; color:var(--accent-trash); border:1px solid var(--accent-trash); margin-bottom:8px; }
        .modal-btn.delete:hover { background:rgba(239,68,68,0.1); }
        .modal-btn.delete.confirm { background:var(--accent-trash); color:white; }
        .modal-email { cursor:pointer; opacity:0.7; }
        .modal-email:hover { opacity:1; text-decoration:underline; }
        .modal-email-input { width:100%; padding:10px 14px; border:1px solid var(--border); border-radius:8px; background:var(--bg-secondary); color:var(--text-primary); font-size:0.9rem; margin-top:4px; }
        
        /* Watchlist prompt modal */
        .watchlist-modal { text-align:center; padding:28px; }
        .watchlist-modal .modal-title { font-size:1.2rem; margin-bottom:12px; }
        .watchlist-modal .modal-subtitle { margin-bottom:24px; }
        .watchlist-actions { display:flex; gap:20px; }
        .watchlist-btn { flex:1; padding:14px 20px; border:2px solid var(--border); border-radius:12px; font-family:'DM Sans',sans-serif; font-weight:600; font-size:1rem; cursor:pointer; transition:all 0.2s; }
        .watchlist-btn.no { background:var(--bg-secondary); color:var(--text-secondary); }
        .watchlist-btn.no:hover { border-color:var(--text-secondary); }
        .watchlist-btn.yes { background:var(--accent-reply); border-color:var(--accent-reply); color:var(--bg-primary); }
        .watchlist-btn.yes:hover { background:var(--accent-new); border-color:var(--accent-new); }

        /* Check complete toast */
        .toast-overlay { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.7); z-index:250; align-items:center; justify-content:center; padding:20px; }
        .toast-overlay.show { display:flex; }
        .toast { background:var(--bg-card); border-radius:16px; padding:24px; width:100%; max-width:320px; text-align:left; border:1px solid var(--border); }
        .toast-title { font-size:1.1rem; font-weight:600; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
        .toast-lines { display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
        .toast-line { font-size:0.9rem; color:var(--text-secondary); display:flex; align-items:center; gap:8px; }
        .toast-line.highlight { color:var(--text-primary); }
        .toast-line .count { color:var(--accent-notify); font-weight:600; }
        .toast-line .count.new { color:var(--accent-new); }
        .toast-line .count.notify { color:var(--accent-notify); }
        .toast-line .count.show { color:var(--accent-show); }
        .toast-line .count.archive { color:var(--accent-archive); }
        .toast-line .count.trash { color:var(--accent-trash); }
        .toast-dismiss { width:100%; padding:12px; background:var(--accent-notify); border:none; border-radius:10px; color:var(--bg-primary); font-family:'DM Sans',sans-serif; font-weight:600; font-size:0.9rem; cursor:pointer; }
        .toast-dismiss:hover { opacity:0.9; }
        .toast-allclear { text-align:center; }
        .toast-allclear .toast-icon { font-size:2.5rem; margin-bottom:12px; }
        .toast-allclear .toast-title { justify-content:center; font-size:1.3rem; }

        /* Loading & empty states */
        .loading { text-align:center; padding:40px; color:var(--text-secondary); }
        .spinner { width:36px; height:36px; border:3px solid var(--border); border-top-color:var(--accent-notify); border-radius:50%; animation:spin 1s linear infinite; margin:0 auto 14px; }
        @keyframes spin { to { transform:rotate(360deg); } }
        .empty-state { text-align:center; padding:50px 20px; color:var(--text-secondary); }
        .empty-state-icon { font-size:2.5rem; margin-bottom:12px; }
        .error-msg { background:rgba(248,113,113,0.1); border:1px solid var(--accent-trash); color:var(--accent-trash); padding:14px; border-radius:10px; margin-bottom:16px; font-size:0.85rem; }
        .success-msg { background:rgba(74,222,128,0.1); border:1px solid var(--accent-notify); color:var(--accent-notify); padding:14px; border-radius:10px; margin-bottom:16px; font-size:0.85rem; }

        /* Watchlist in settings */
        .settings-btn { position:fixed; bottom:20px; right:20px; width:50px; height:50px; border-radius:50%; background:var(--bg-card); border:2px solid var(--border); color:var(--text-secondary); font-size:1.2rem; cursor:pointer; z-index:100; }
        .settings-btn:hover { border-color:var(--accent-fyi); color:var(--accent-fyi); }
        .settings-panel { display:none; position:fixed; bottom:80px; right:20px; background:var(--bg-card); border:1px solid var(--border); border-radius:14px; padding:16px; width:320px; max-height:60vh; overflow-y:auto; z-index:100; }
        .settings-panel.show { display:block; }
        .settings-title { font-weight:600; margin-bottom:14px; color:var(--accent-fyi); font-size:0.95rem; }
        .settings-tabs { display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
        .settings-tab { flex:1; min-width:60px; padding:8px; background:var(--bg-secondary); border:none; color:var(--text-secondary); font-family:'DM Sans',sans-serif; font-size:0.7rem; font-weight:600; border-radius:6px; cursor:pointer; }
        .settings-tab.active { background:var(--accent-fyi); color:white; }
        .sender-rule { display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--border); }
        .sender-rule:last-child { border-bottom:none; }
        .sender-rule-name { flex:1; font-size:0.8rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .sender-rule-status { font-size:0.65rem; padding:3px 6px; border-radius:4px; text-transform:uppercase; font-weight:600; }
        .sender-rule-status.notify { background:rgba(74,222,128,0.2); color:var(--accent-notify); }
        .sender-rule-status.show { background:rgba(56,189,248,0.2); color:var(--accent-show); }
        .sender-rule-status.fyi { background:rgba(168,85,247,0.2); color:var(--accent-fyi); }
        .sender-rule-status.archive { background:rgba(100,116,139,0.2); color:var(--accent-archive); }
        .sender-rule-status.trash { background:rgba(248,113,113,0.2); color:var(--accent-trash); }
        .sender-rule-edit { background:none; border:none; color:var(--text-secondary); cursor:pointer; font-size:0.9rem; padding:4px; }
        .sender-rule-edit:hover { color:var(--accent-show); }

        @media (max-width:500px) { 
            body { padding:10px; }
            h1 { font-size:1.7rem; } 
            .tagline { font-size:0.85rem; }
            .tab-btn { font-size:0.75rem; padding:10px 8px; }
            .sender-card { padding:12px; } 
            .avatar { width:38px; height:38px; font-size:0.85rem; } 
            .sender-name { font-size:0.9rem; }
            .sender-email { font-size:0.75rem; }
            .message-count { font-size:0.7rem; padding:4px 8px; }
            .settings-panel { width:calc(100% - 24px); right:12px; left:12px; }
            .message-header { padding:12px; }
            .message-header .avatar { width:42px; height:42px; }
            .top-actions { gap:3px; }
            .top-action-btn { padding:2px 1px; font-size:0.55rem; border-width:1px; }
            .reply-section { padding:12px; }
            .reply-textarea { min-height:80px; font-size:0.85rem; }
            .full-message { padding:12px; }
            .full-message-subject { font-size:1rem; }
            .full-message-meta { font-size:0.75rem; }
            .full-message-body { font-size:0.9rem; }
            .msg-action-btn { padding:10px 8px; font-size:0.75rem; min-width:70px; }
            .check-btn { padding:14px; font-size:0.9rem; }
            .search-input { padding:12px; font-size:0.9rem; }
            .search-btn { padding:12px 14px; font-size:0.85rem; }
        }