/* ═══════════════════════════════════════════════════════════════════════════
   The Gatekeeper — style.css v6 (6 categories)
═══════════════════════════════════════════════════════════════════════════ */
:root {
  --bg:        #FCF9F7; --surface:#FFFFFF; --surface-2:#F8F6F3; --surface-3:#F2EFE9;
  --border:rgba(3,3,2,.08); --border-strong:rgba(3,3,2,.14);
  --text-primary:#1A1815; --text-secondary:#7A7672; --text-muted:#B0ADA8;
  --accent:#1A1815; --accent-hover:#000;

  --urgent:    #C0392B; --urgent-bg:#FEF2F1;    --urgent-border:rgba(192,57,43,.15);
  --personal:  #2E7D52; --personal-bg:#F0FAF4;  --personal-border:rgba(46,125,82,.15);
  --financial: #2F6EA5; --financial-bg:#EEF5FD; --financial-border:rgba(47,110,165,.15);
  --brand:     #8A6534; --brand-bg:#FDF7EE;      --brand-border:rgba(138,101,52,.15);
  --promotions:#A05C9A; --promotions-bg:#FAF0F9; --promotions-border:rgba(160,92,154,.15);
  --noreply:   #6B5EA8; --noreply-bg:#F4F2FB;    --noreply-border:rgba(107,94,168,.15);
  --notifications:#E67E22; --notifications-bg:#FDF3EB; --notifications-border:rgba(230,126,34,.15);
  --spam:      #A83434; --spam-bg:#FDF2F2;        --spam-border:rgba(168,52,52,.15);
  --unsubscribed:#2E7D52; --unsubscribed-bg:#F0FAF4; --unsubscribed-border:rgba(46,125,82,.15);

  --sidebar-w:248px; --detail-w:420px;
  --radius:14px; --radius-sm:10px; --radius-xs:8px; --radius-pill:100px;
  --shadow-xs:0 1px 2px rgba(0,0,0,.03);
  --shadow-sm:0 2px 8px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.03);
  --shadow-md:0 8px 24px rgba(0,0,0,.05),0 2px 8px rgba(0,0,0,.03);
  --shadow-lg:0 24px 64px rgba(0,0,0,.09),0 8px 24px rgba(0,0,0,.04);
  --t:140ms ease; --tm:220ms ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212; 
    --surface: #1E1E1E; 
    --surface-2: #252525; 
    --surface-3: #2D2D2D;
    --border: rgba(255,255,255,0.08);
    --border-strong: rgba(255,255,255,0.14);
    --text-primary: #F0F0F0;
    --text-secondary: #A0A0A0;
    --text-muted: #6C6C6C;
    --accent: #EAEAEA;
    --accent-hover: #FFFFFF;

    --urgent: #E74C3C; --urgent-bg: rgba(231,76,60,0.15); --urgent-border: rgba(231,76,60,0.25);
    --personal: #2ECC71; --personal-bg: rgba(46,204,113,0.15); --personal-border: rgba(46,204,113,0.25);
    --financial: #5DADE2; --financial-bg: rgba(93,173,226,0.15); --financial-border: rgba(93,173,226,0.25);
    --brand: #E67E22; --brand-bg: rgba(230,126,34,0.15); --brand-border: rgba(230,126,34,0.25);
    --promotions: #AF7AC5; --promotions-bg: rgba(175,122,197,0.15); --promotions-border: rgba(175,122,197,0.25);
    --noreply: #A569BD; --noreply-bg: rgba(165,105,189,0.15); --noreply-border: rgba(165,105,189,0.25);
    --notifications: #EB984E; --notifications-bg: rgba(235,152,78,0.15); --notifications-border: rgba(235,152,78,0.25);
    --spam: #CD6155; --spam-bg: rgba(205,97,85,0.15); --spam-border: rgba(205,97,85,0.25);
    --unsubscribed: #2ECC71; --unsubscribed-bg: rgba(46,204,113,0.15); --unsubscribed-border: rgba(46,204,113,0.25);

    --shadow-md: 0 8px 24px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.2);
    --shadow-lg: 0 24px 64px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.2);
  }
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{font-family:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;
  line-height:1.6;background:var(--bg);color:var(--text-primary);-webkit-font-smoothing:antialiased;}
input,button,select{font-family:inherit;}
button{cursor:pointer;border:none;background:none;}
a{text-decoration:none;color:inherit;}
.hidden{display:none!important;}
#app{display:flex;height:100vh;overflow:hidden;}

/* ── AUTH ── */
.auth-screen{flex:1;display:flex;align-items:center;justify-content:center;}
.auth-card{background:var(--surface);border-radius:24px;padding:64px 56px;max-width:420px;
  width:calc(100% - 48px);box-shadow:var(--shadow-lg);border:1px solid var(--border);
  display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center;animation:fadeUp .4s ease;}
.auth-title{font-size:26px;font-weight:500;letter-spacing:-.6px;}
.auth-sub{color:var(--text-secondary);font-size:15px;line-height:1.75;max-width:280px;}
.auth-features{display:flex;flex-direction:column;gap:14px;width:100%;
  background:var(--surface-2);border-radius:var(--radius-sm);padding:22px 24px;border:1px solid var(--border);}
.auth-feature{display:flex;align-items:flex-start;gap:12px;font-size:13px;color:var(--text-secondary);text-align:left;}
.feature-icon{font-size:15px;flex-shrink:0;}

/* ── SIDEBAR ── */
.sidebar{width:var(--sidebar-w);background:var(--surface-2);border-right:1px solid var(--border);
  display:flex;flex-direction:column;flex-shrink:0;}
.sidebar-header{display:flex;align-items:center;gap:11px;padding:28px 22px 24px;border-bottom:1px solid var(--border);}
.sidebar-brand{font-weight:600;font-size:15px;letter-spacing:-.4px;}
.sidebar-nav{flex:1;padding:16px 12px;display:flex;flex-direction:column;gap:3px;overflow-y:auto;}
.nav-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--radius-xs);
  color:var(--text-secondary);font-size:13.5px;font-weight:400;transition:all var(--t);width:100%;text-align:left;}
.nav-item:hover{background:var(--surface-3);color:var(--text-primary);}
.nav-item.active{background:var(--surface);color:var(--text-primary);font-weight:500;box-shadow:var(--shadow-xs);}
.nav-icon{font-size:13px;flex-shrink:0;opacity:.65;}
.nav-item.active .nav-icon{opacity:1;}
.nav-label{flex:1;}
.nav-badge{font-size:12px;color:var(--text-muted);}
.nav-badge.urgent    {color:var(--urgent);}
.nav-badge.personal  {color:var(--personal);}
.nav-badge.financial {color:var(--financial);}
.nav-badge.brand     {color:var(--brand);}
.nav-badge.promotions{color:var(--promotions);}
.nav-badge.noreply   {color:var(--noreply);}
.nav-badge.notifications{color:var(--notifications);}
.nav-badge.spam      {color:var(--spam);}
.nav-badge.subscribed{color:var(--text-primary);}
.nav-badge.unsubscribed{color:var(--unsubscribed);}

.sidebar-footer{padding:16px 14px 24px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:12px;}
.scan-controls{display:flex;flex-direction:column;gap:10px;}
.depth-label{font-size:11px;color:var(--text-muted);font-weight:500;text-transform:uppercase;letter-spacing:.7px;}
.depth-select{width:100%;padding:8px 30px 8px 12px;border-radius:var(--radius-xs);border:1px solid var(--border);
  background:var(--surface);color:var(--text-secondary);font-size:13px;outline:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23B0ADA8' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;cursor:pointer;}
.btn-scan{width:100%;justify-content:center;font-size:13.5px;padding:10px 16px;}
.logout-btn{display:flex;align-items:center;gap:7px;padding:8px 10px;border-radius:var(--radius-xs);
  font-size:12px;color:var(--text-muted);transition:all var(--t);}
.logout-btn:hover{color:var(--spam);background:var(--spam-bg);}

/* ── MAIN ── */
.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:24px 32px 20px;
  background:var(--surface);border-bottom:1px solid var(--border);gap:20px;flex-shrink:0;}
.topbar-left{flex:1;min-width:0;}
.topbar-right{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.page-title{font-size:18px;font-weight:500;letter-spacing:-.5px;}
.page-sub{font-size:13px;color:var(--text-muted);margin-top:3px;}
.search-bar{display:flex;align-items:center;gap:9px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius-pill);padding:8px 16px;min-width:180px;transition:all var(--t);}
.search-bar:focus-within{border-color:var(--border-strong);background:var(--surface);box-shadow:var(--shadow-sm);}
.search-bar svg{color:var(--text-muted);flex-shrink:0;}
.search-bar input{border:none;background:none;outline:none;font-size:13px;color:var(--text-primary);width:100%;}
.search-bar input::placeholder{color:var(--text-muted);}
.toggle-group{display:flex;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius-pill);padding:3px;gap:2px;}
.toggle-btn{padding:5px 14px;border-radius:var(--radius-pill);font-size:12px;font-weight:500;
  color:var(--text-muted);transition:all var(--t);}
.toggle-btn.active{background:var(--surface);color:var(--text-primary);box-shadow:var(--shadow-xs);}

/* ── PROGRESS ── */
.scan-progress-bar{height:3px;background:var(--surface-3);flex-shrink:0;position:relative;overflow:visible;}
.progress-inner{height:100%;background:var(--accent);transition:width .25s linear;}
.progress-label{position:absolute;right:16px;top:6px;font-size:11px;color:var(--text-muted);font-weight:500;white-space:nowrap;}

/* ── SCROLL AREA ── */
.sender-grid{flex:1;overflow-y:auto;padding:28px 32px;display:flex;flex-direction:column;gap:8px;}
.sender-grid::-webkit-scrollbar{width:4px;}
.sender-grid::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:4px;}

/* ── DASHBOARD ── */
.dash-panel{display:flex;flex-direction:column;gap:10px;margin-bottom:6px;}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px 24px;transition:box-shadow var(--tm);}
.stat-card:hover{box-shadow:var(--shadow-md);}
.stat-card.soft-selected{border-color:var(--brand-border);background:var(--brand-bg);box-shadow:var(--shadow-md);}
.stat-card.accent-card{
  background: linear-gradient(135deg, #4A5D9A 0%, #35457A 100%);
  border-color: #35457A;
}
.stat-card.accent-card .stat-number,.stat-card.accent-card .stat-label,.stat-card.accent-card .stat-detail{color:#fff;}
.stat-card.urgent-card{border-color:var(--urgent-border);background:var(--urgent-bg);}
.stat-number{font-size:30px;font-weight:500;letter-spacing:-1.5px;line-height:1;color:var(--text-primary);}
.stat-number.urgent    {color:var(--urgent);}
.stat-number.personal  {color:var(--personal);}
.stat-number.financial {color:var(--financial);}
.stat-number.brand     {color:var(--brand);}
.stat-number.promotions{color:var(--promotions);}
.stat-number.noreply   {color:var(--noreply);}
.stat-number.notifications{color:var(--notifications);}
.stat-number.spam      {color:var(--spam);}
.stat-card.personal  .stat-number{color:var(--personal);}
.stat-card.brand     .stat-number{color:var(--brand);}
.stat-card.financial .stat-number{color:var(--financial);}
.stat-card.promotions.stat-number{color:var(--promotions);}
.stat-card.noreply   .stat-number{color:var(--noreply);}
.stat-card.notifications .stat-number{color:var(--notifications);}
.stat-card.spam      .stat-number{color:var(--spam);}
.stat-label{font-size:12px;color:var(--text-muted);margin-top:8px;}
.stat-detail{font-size:11px;color:var(--text-muted);margin-top:4px;opacity:.7;}

/* ── STATES ── */
.empty-state,.scanning-state{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:16px;padding:80px 40px;text-align:center;}
.empty-icon{font-size:36px;opacity:.35;}
.empty-state h3,.scanning-state h3{font-size:18px;font-weight:500;letter-spacing:-.4px;}
.empty-state p,.scanning-state p{font-size:14px;color:var(--text-muted);max-width:260px;line-height:1.8;}
.scan-spinner{width:28px;height:28px;border:2px solid var(--border);border-top-color:var(--accent);
  border-radius:50%;animation:spin .9s linear infinite;}
.scanning-phase{font-size:12px;color:var(--text-muted);margin-top:-8px;font-weight:500;letter-spacing:.3px;}

/* ── SENDER CARD ── */
.sender-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 20px;display:flex;align-items:center;gap:16px;cursor:pointer;
  transition:box-shadow var(--tm),border-color var(--tm),transform var(--tm);
  animation:cardAppear .2s ease both; position: relative;}
.sender-card:hover{box-shadow:var(--shadow-md);border-color:var(--border-strong);transform:translateY(-1px);}

.sender-select{width:18px;height:18px;cursor:pointer;accent-color:var(--accent);margin-right:4px;}
.sender-card.urgent-row{border-left:3px solid var(--urgent);}
.sender-avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:500;flex-shrink:0;text-transform:uppercase;overflow:hidden;}
.sender-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.sender-avatar.urgent    {background:var(--urgent-bg);    color:var(--urgent);}
.sender-avatar.personal  {background:var(--personal-bg);  color:var(--personal);}
.sender-avatar.financial {background:var(--financial-bg); color:var(--financial);}
.sender-avatar.brand     {background:var(--brand-bg);     color:var(--brand);}
.sender-avatar.promotions{background:var(--promotions-bg);color:var(--promotions);}
.sender-avatar.noreply   {background:var(--noreply-bg);   color:var(--noreply);}
.sender-avatar.notifications{background:var(--notifications-bg);color:var(--notifications);}
.sender-avatar.spam      {background:var(--spam-bg);      color:var(--spam);}
.sender-avatar.unsubscribed{background:var(--unsubscribed-bg);color:var(--unsubscribed);}
.sender-info{flex:1;min-width:0;}
.sender-name{font-weight:500;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.1px;}
.sender-email{font-size:12.5px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;}
.sender-meta{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex-shrink:0;}
.email-count{font-size:12px;color:var(--text-muted);}
.score-wrap{display:flex;align-items:center;gap:9px;}
.score-bar-bg{width:56px;height:3px;background:var(--surface-3);border-radius:2px;overflow:hidden;}
.score-bar-fill{height:100%;border-radius:2px;transition:width .8s cubic-bezier(.16,1,.3,1);}
.score-label{font-size:11px;min-width:18px;text-align:right;color:var(--text-muted);}
.score-low  .score-bar-fill{background:var(--personal);}  .score-low  .score-label{color:var(--personal);}
.score-mid  .score-bar-fill{background:var(--brand);}     .score-mid  .score-label{color:var(--brand);}
.score-high .score-bar-fill{background:var(--spam);}      .score-high .score-label{color:var(--spam);}

.category-badge{font-size:11px;padding:2px 10px;border-radius:var(--radius-pill);text-transform:capitalize;font-weight:400;}
.category-badge.urgent    {background:var(--urgent-bg);    color:var(--urgent);}
.category-badge.personal  {background:var(--personal-bg);  color:var(--personal);}
.category-badge.financial {background:var(--financial-bg); color:var(--financial);}
.category-badge.brand     {background:var(--brand-bg);     color:var(--brand);}
.category-badge.promotions{background:var(--promotions-bg);color:var(--promotions);}
.category-badge.noreply   {background:var(--noreply-bg);   color:var(--noreply);}
.category-badge.notifications{background:var(--notifications-bg);color:var(--notifications);}
.category-badge.spam      {background:var(--spam-bg);      color:var(--spam);}
.category-badge.unsubscribed{background:var(--unsubscribed-bg);color:var(--unsubscribed);}

.sender-actions{display:flex;gap:6px;flex-shrink:0;}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:var(--radius-pill);
  font-size:13.5px;font-weight:500;transition:all var(--t);border:1px solid transparent;white-space:nowrap;}
.btn-primary{background:var(--accent);color:#FFF;}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.18);}
.btn-ghost{background:transparent;color:var(--text-secondary);border-color:var(--border);}
.btn-ghost:hover{background:var(--surface);color:var(--text-primary);border-color:var(--border-strong);box-shadow:var(--shadow-sm);}
.btn-ghost.danger:hover{background:var(--spam-bg);color:var(--spam);border-color:var(--spam-border);}
.btn-ghost.archive:hover{background:var(--brand-bg);color:var(--brand);border-color:var(--brand-border);}
.btn-large{padding:12px 28px;font-size:15px;}
.btn-action{padding:5px 13px;font-size:12px;background:transparent;color:var(--text-muted);
  border:1px solid var(--border);border-radius:var(--radius-pill);transition:all var(--t);}
.btn-action:hover{background:var(--surface-2);color:var(--text-primary);border-color:var(--border-strong);}
.btn-action.spam-action:hover{background:var(--spam-bg);color:var(--spam);border-color:var(--spam-border);}
.btn-action.unsub-action:hover{background:var(--brand-bg);color:var(--brand);border-color:var(--brand-border);}
.btn-action.archive-action:hover{background:var(--noreply-bg);color:var(--noreply);border-color:var(--noreply-border);}
.btn-action.report-action:hover{background:var(--urgent-bg);color:var(--urgent);border-color:var(--urgent-border);}
.btn-action:disabled{opacity:.3;cursor:not-allowed;}
.btn-action.success{background:var(--personal-bg);color:var(--personal);border-color:var(--personal-border);}

/* ── TOOLTIPS ── */
[data-tooltip] {
  position: relative;
}
[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 6px 10px;
  background: var(--text-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  border-radius: var(--radius-xs);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--shadow-sm);
  z-index: 1000;
}
[data-tooltip]::after {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  border-width: 4px;
  border-style: solid;
  border-color: var(--text-primary) transparent transparent transparent;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1000;
}
[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
[data-tooltip]:hover::after {
  transform: translateX(-50%);
}

/* ── DETAIL PANEL ── */
.detail-overlay{position:fixed;inset:0;z-index:500;background:rgba(26,24,21,.2);
  backdrop-filter:blur(4px);animation:fadeIn .2s ease;}
.detail-panel{position:absolute;right:0;top:0;bottom:0;width:var(--detail-w);background:var(--surface);
  border-left:1px solid var(--border);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;
  overflow-y:auto;animation:slideIn .25s ease;}
.detail-close{position:sticky;top:0;align-self:flex-end;margin:16px 16px 0;padding:6px 10px;
  border-radius:var(--radius-xs);font-size:14px;color:var(--text-muted);background:var(--surface);
  border:1px solid var(--border);transition:all var(--t);z-index:1;cursor:pointer;}
.detail-close:hover{color:var(--text-primary);background:var(--surface-2);}
.detail-header{display:flex;gap:16px;padding:8px 24px 24px;border-bottom:1px solid var(--border);}
.detail-info{flex:1;min-width:0;}
.detail-name{font-size:16px;font-weight:500;letter-spacing:-.3px;margin-bottom:4px;}
.detail-email{font-size:12px;color:var(--text-muted);margin-bottom:10px;word-break:break-all;}
.detail-badges{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.score-pill{font-size:11px;color:var(--text-muted);}
.detail-stats{display:flex;padding:20px 24px;border-bottom:1px solid var(--border);}
.detail-stat{flex:1;text-align:center;}
.detail-stat+.detail-stat{border-left:1px solid var(--border);}
.ds-num{font-size:22px;font-weight:500;letter-spacing:-1px;}
.ds-label{font-size:11px;color:var(--text-muted);margin-top:3px;}
.detail-actions{display:flex;gap:8px;padding:18px 24px;border-bottom:1px solid var(--border);flex-wrap:wrap;}
.detail-section-label{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.7px;
  color:var(--text-muted);padding:18px 24px 10px;}
.detail-email-list{display:flex;flex-direction:column;padding:0 16px 24px;gap:4px;}
.detail-email-item{padding:11px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);
  background:var(--surface-2);cursor:pointer;transition:all var(--t);}
.detail-email-item:hover{border-color:var(--border-strong);background:var(--surface);transform:translateX(2px);}
.dei-subject{font-size:13px;font-weight:400;color:var(--text-primary);margin-bottom:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dei-snippet{font-size:12px;color:var(--text-muted);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.dei-date{font-size:11px;color:var(--text-muted);margin-top:4px;}
.detail-loading{text-align:center;color:var(--text-muted);font-size:13px;padding:24px;}
.move-cat-section{padding:0 16px 20px;display:flex;flex-wrap:wrap;gap:6px;}
.move-cat-label{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.7px;
  color:var(--text-muted);width:100%;padding:14px 8px 8px;}

/* ── EMAIL READER ── */
.email-reader-panel{width:620px;right:0;max-width:calc(100vw - var(--detail-w));
  border-left:none;box-shadow:-4px 0 24px rgba(0,0,0,.08);display:flex;flex-direction:row;}
.er-resize-handle{width:16px;background:var(--surface-2);border-left:1px solid var(--border);
  border-right:1px solid var(--border);cursor:col-resize;display:flex;align-items:center;
  justify-content:center;flex-shrink:0;transition:background var(--t);}
.er-resize-handle:hover, .er-resize-handle:active{background:var(--surface-3);}
.er-resize-handle::after{content:'';width:4px;height:24px;border-radius:2px;background:var(--border-strong);}
.er-content-wrap{flex:1;display:flex;flex-direction:column;min-width:400px;overflow:hidden;}
.er-header{padding:8px 24px 20px;border-bottom:1px solid var(--border);}
.er-subject{font-size:17px;font-weight:500;letter-spacing:-.3px;line-height:1.4;
  margin-bottom:8px;color:var(--text-primary);}
.er-meta{font-size:12px;color:var(--text-muted);display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.er-sep{opacity:.4;}
.er-body-wrap{flex:1;overflow-y:auto;padding:20px 24px 32px;display:flex;flex-direction:column;}
.er-loading{color:var(--text-muted);font-size:13px;padding:20px 0;}
.er-body{font-size:14px;line-height:1.9;color:var(--text-secondary);white-space:pre-wrap;word-break:break-word;flex:1;}
.er-iframe{width:100%;flex:1;border:none;border-radius:var(--radius-sm);min-height:500px;}
/* Safe link button */
.safe-link{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;margin:1px 0;
  background:var(--financial-bg);color:var(--financial);border:1px solid var(--financial-border);
  border-radius:20px;font-size:12px;cursor:pointer;transition:all var(--t);}
.safe-link:hover{background:var(--financial);color:#fff;}
.safe-link-expanded{display:block;font-size:11px;color:var(--text-muted);padding:4px 8px;
  background:var(--surface-2);border-radius:var(--radius-xs);margin:4px 0;word-break:break-all;}
.safe-link-expanded a{color:var(--financial);text-decoration:underline;}

/* ── TOAST ── */
#toast-container{position:fixed;bottom:28px;right:28px;display:flex;flex-direction:column;gap:8px;z-index:1000;pointer-events:none;}
.toast{background:var(--text-primary);color:#FFF;padding:12px 20px;border-radius:var(--radius-sm);
  font-size:13px;box-shadow:var(--shadow-lg);animation:toastIn .25s ease;pointer-events:auto;max-width:300px;line-height:1.5;}
.toast.success{background:var(--personal);}
.toast.error{background:var(--spam);}
.toast.fadeout{animation:toastOut .25s ease forwards;}

/* ── MODAL ── */
.modal-overlay{position:fixed;inset:0;background:rgba(26,24,21,.3);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;z-index:999;animation:fadeIn .2s ease;}
.modal{background:var(--surface);border-radius:20px;padding:36px 40px;max-width:380px;
  width:calc(100% - 48px);box-shadow:var(--shadow-lg);border:1px solid var(--border);animation:fadeUp .22s ease;}
.modal h3{font-size:17px;font-weight:500;letter-spacing:-.4px;margin-bottom:10px;}
.modal p{font-size:14px;color:var(--text-secondary);line-height:1.7;margin-bottom:28px;}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;}

/* ── SCREEN ── */
.screen{display:flex;}
#main-app{display:flex;flex:1;overflow:hidden;min-height:0;animation:fadeIn .3s ease;}

/* ── ANIMATIONS ── */
@keyframes spin    {to{transform:rotate(360deg);}}
@keyframes fadeUp  {from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeIn  {from{opacity:0;}to{opacity:1;}}
@keyframes slideIn {from{transform:translateX(100%);}to{transform:translateX(0);}}
@keyframes toastIn {from{opacity:0;transform:translateY(8px) scale(.96);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes toastOut{to{opacity:0;transform:translateY(8px) scale(.96);}}
@keyframes cardAppear{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

/* ── Sort Toggle ── */
.sort-toggle{display:flex;gap:2px;background:var(--surface-2);border-radius:var(--radius-xs);padding:2px;}
.sort-btn{padding:5px 12px;font-size:12px;font-weight:500;border:none;background:none;border-radius:6px;cursor:pointer;color:var(--text-secondary);transition:var(--t);}
.sort-btn.active{background:var(--surface);color:var(--text-primary);box-shadow:var(--shadow-xs);}

/* ── Category Actions Bar ── */
.category-actions{display:flex;flex-wrap:wrap;gap:8px;padding:10px 20px;border-bottom:1px solid var(--border);background:var(--surface-2);}
.category-actions .btn{font-size:12px;padding:5px 14px;}

/* ── PURGE Button ── */
.btn-purge{width:100%;padding:10px 16px;margin-bottom:10px;font-size:13px;font-weight:600;color:#fff;background:#C0392B;border:none;border-radius:var(--radius-xs);cursor:pointer;transition:var(--t);letter-spacing:.3px;}
.btn-purge:hover{background:#A93226;}
.btn-purge:disabled{opacity:.5;cursor:not-allowed;}
.btn-sync{transition:all var(--t);}
.btn-sync.synced{
  background:var(--personal-bg);
  border-color:var(--personal-border);
  color:var(--personal);
  font-weight:600;
}

/* ── Multi-Select Floating Bar ── */
.multi-select-bar{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  display:flex;align-items:center;gap:12px;padding:12px 20px;
  background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);z-index:400;opacity:0;pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;}
.multi-select-bar.visible{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);}
.multi-select-bar .divider{width:1px;height:24px;background:var(--border);}
.multi-select-bar #select-count{font-size:13px;font-weight:600;color:var(--text-primary);white-space:nowrap;}