:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none;background:#f7f8fa;color:#151c2a}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer}a{color:#375ab6}.hidden{display:none!important}.app{min-height:100vh}.topbar{height:76px;background:#fff;border-bottom:1px solid #e7eaf0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 32px;position:sticky;top:0;z-index:3}.brand{display:flex;align-items:center;gap:12px}.brand-mark{display:grid;place-items:center;width:39px;height:39px;background:#1f365c;color:#fff;border-radius:12px;font-size:29px;font-weight:700}.brand strong{display:block;font-size:15px;letter-spacing:-.2px}.brand small{display:block;color:#8290a3;font-size:12px;margin-top:3px}.header-actions,.toolbar-actions{display:flex;align-items:center;gap:10px}.header-actions{font-size:12px;color:#66758d;flex-wrap:wrap;justify-content:flex-end}.status-dot{height:8px;width:8px;background:#c0c7d5;border-radius:50%}.status-dot.connected{background:#17a86b}.button{padding:9px 14px;border:1px solid transparent;border-radius:8px;font-size:12px;font-weight:700;white-space:nowrap;background:#fff}.button.primary{background:#3455aa;color:#fff}.button.primary:hover{background:#28448e}.button.outline{border-color:#e0e5ee;color:#34435a}.button.ghost{background:transparent;color:#708096}.button:disabled{opacity:.45;cursor:not-allowed}.button.wide{width:100%}.overview{padding:34px 32px 28px;display:flex;justify-content:space-between;align-items:center;gap:24px;max-width:1600px;margin:auto}.eyebrow{font-size:11px;letter-spacing:1.5px;font-weight:800;color:#7990b6;margin:0 0 10px}.overview h1{font-size:30px;letter-spacing:-1px;margin:0 0 8px;font-weight:750}.overview p:not(.eyebrow){margin:0;font-size:13px;color:#78859a}.stats{display:flex;gap:10px}.stat{min-width:142px;border:1px solid #e7eaf0;border-radius:12px;background:#fff;padding:14px 17px}.stat span{font-size:10px;color:#8793a5;font-weight:800;letter-spacing:1px;display:block}.stat strong{display:block;font-size:26px;letter-spacing:-.6px;margin-top:7px}.workspace{max-width:1600px;margin:auto;padding:0 32px;display:grid;grid-template-columns:240px minmax(0,1fr);gap:18px}.sidebar,.table-area{background:white;border:1px solid #e7eaf0;border-radius:13px;box-shadow:0 2px 7px rgba(30,45,70,.02)}.sidebar{padding:20px;align-self:start}.side-header,.table-toolbar{display:flex;justify-content:space-between;align-items:center}.sidebar h2,.table-toolbar h2{margin:0;font-size:15px}.link-button{border:0;background:none;color:#5473b0;font-size:11px;padding:0;font-weight:700}.filter-block{margin-top:24px}.filter-block label{font-size:10px;color:#76869b;font-weight:800;letter-spacing:.9px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}.search-shell{height:40px;border:1px solid #e0e5eb;border-radius:8px;display:flex;align-items:center;gap:8px;padding:0 10px}.search-shell span{font-size:21px;color:#8d9aab}.search-shell input{width:100%;border:none;outline:none;font-size:12px;min-width:0}.filter-block select{width:100%;height:39px;padding:0 10px;color:#344255;border:1px solid #e0e5eb;border-radius:8px;background:#fff;font-size:12px}.tag-list{display:flex;flex-wrap:wrap;gap:6px}.chip{border:1px solid #e3e8f2;border-radius:6px;background:#f5f7fb;color:#4b638f;font-size:11px;padding:5px 7px}.chip.selected{background:#dce8ff;color:#23477b;border-color:#9ebce9}.tag-list .chip{cursor:pointer}.checkbox{display:flex!important;align-items:center;gap:7px;font-size:12px!important;letter-spacing:0!important;font-weight:500!important;color:#506078!important}.note{margin-top:25px;border-top:1px solid #edf0f5;padding-top:15px;color:#8693a5;line-height:1.65;font-size:11px}.table-area{overflow:hidden;min-width:0}.table-toolbar{padding:20px 20px 17px;gap:16px}.table-toolbar h2{margin-bottom:5px}.muted{color:#8592a6;font-size:12px}.switch{font-size:12px;color:#536176;display:flex;align-items:center;gap:5px;white-space:nowrap}.toolbar-actions select{height:36px;border:1px solid #e2e6ed;border-radius:8px;background:white;color:#5b697e;padding:0 8px;font-size:12px}.table-scroll{overflow-x:auto;min-height:300px}.data-table{border-collapse:collapse;width:100%;min-width:900px;text-align:left}.data-table thead{background:#f8f9fb}.data-table th{color:#8c98aa;font-size:10px;font-weight:800;letter-spacing:.8px;border-top:1px solid #e7eaf0;border-bottom:1px solid #e7eaf0;padding:13px 14px;white-space:nowrap}.data-table td{padding:14px;border-bottom:1px solid #edf0f5;font-size:12px;color:#536277;vertical-align:middle}.data-table tbody tr:hover{background:#f7faff}.contact-name{color:#283e65;background:none;border:0;font-weight:750;padding:0;font-size:12px}.contact-name:hover{text-decoration:underline}.contact-email{display:block;font-size:11px;color:#8a95a6;margin-top:4px;max-width:230px;overflow:hidden;text-overflow:ellipsis}.company{color:#344560;font-weight:600}.tag-cell{display:flex;gap:4px;flex-wrap:wrap}.tag-cell .chip{font-size:10px;padding:4px 6px}.avatar{height:34px;width:34px;border-radius:10px;display:grid;place-items:center;background:#e6edfc;color:#385b9e;font-weight:700;flex-shrink:0}.contact-info{display:flex;align-items:center;gap:9px}.country{display:inline-flex;background:#f0f2f7;border-radius:5px;padding:5px 7px;color:#647188}.empty{text-align:center;padding:65px 25px;color:#6f8098}.empty h3{margin:10px 0;color:#324362}.empty p{max-width:360px;margin:0 auto;font-size:13px;line-height:1.65}.empty-symbol{font-size:40px;color:#a2b1c8}.pagination{display:flex;align-items:center;justify-content:center;gap:18px;padding:17px}.drawer-backdrop{position:fixed;inset:0;background:#10182880;z-index:10}.drawer{position:fixed;right:0;top:0;bottom:0;width:min(480px,100vw);background:white;z-index:11;overflow:auto;box-shadow:-15px 0 45px #10182820}.drawer-top{display:flex;justify-content:space-between;align-items:center;padding:21px 26px;border-bottom:1px solid #e5e9f0;color:#7b8ba2;font-size:11px;font-weight:800;letter-spacing:1px}.icon-button{border:0;background:transparent;font-size:18px;color:#738096}.drawer-body{padding:25px}.drawer-avatar{height:60px;width:60px;font-size:24px;border-radius:18px;background:#dbe6fb;color:#345a9c;display:grid;place-items:center}.drawer h2{font-size:23px;margin:15px 0 5px}.drawer .email{font-size:13px;color:#7486a0;word-break:break-all}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}.detail-grid label,.field label{display:block;font-size:10px;letter-spacing:1px;color:#8595a9;font-weight:800;margin-bottom:7px}.detail-grid span{font-size:13px;color:#34435c}.section-heading{font-size:13px;font-weight:750;margin:27px 0 12px;border-bottom:1px solid #ebedf2;padding-bottom:10px}.activity{border-left:2px solid #dae5f7;margin-left:7px;padding:4px 0 15px 18px;position:relative;font-size:12px}.activity:before{content:'';position:absolute;top:6px;left:-5px;background:#6084c5;width:8px;height:8px;border-radius:50%}.activity a{display:block;margin-top:6px;font-size:11px}.activity .date{font-size:11px;color:#91a0b0}.field{margin-top:14px}.field input{width:100%;padding:10px;border-radius:8px;border:1px solid #dee5ef;color:#33435d;font-size:13px}.drawer-actions{display:flex;gap:9px;margin-top:20px}footer{text-align:center;color:#97a1af;font-size:11px;padding:30px}.login-screen{min-height:100vh;display:grid;place-items:center;background:linear-gradient(140deg,#edf3fc,#f8f9fc)}.login-card{width:min(390px,calc(100vw - 36px));background:white;padding:36px;border-radius:18px;box-shadow:0 14px 60px #293e6518;display:flex;flex-direction:column;gap:14px}.login-card .brand-mark{width:50px;height:50px}.login-card h1{margin:3px 0 0;font-size:24px}.login-card p{margin:0 0 6px;color:#8794a7;font-size:13px}.login-card label{font-size:12px;color:#4b5e79}.login-card input{height:43px;border:1px solid #d8e1ef;border-radius:8px;padding:0 12px}.login-card p.error{color:#bd4050;margin:0}.toast{position:fixed;z-index:20;right:28px;bottom:28px;background:#233c69;color:white;padding:13px 18px;border-radius:10px;box-shadow:0 10px 30px #0003;max-width:500px;font-size:13px}@media(max-width:1100px){.overview{align-items:start;flex-direction:column}.stats{width:100%}.stat{flex:1}.header-actions #syncStatus{display:none}}@media(max-width:800px){.topbar{padding:13px 17px;height:auto;align-items:flex-start}.header-actions{gap:5px}.header-actions .button{padding:7px}.overview{padding:27px 17px}.workspace{padding:0 12px;grid-template-columns:1fr}.sidebar{display:grid;grid-template-columns:1fr 1fr;gap:12px}.sidebar .side-header{grid-column:1/-1}.filter-block{margin-top:4px}.filter-block:last-child{grid-column:1/-1}.note{display:none}.toolbar-actions{flex-wrap:wrap;justify-content:flex-end}.table-toolbar{flex-wrap:wrap}.stat{min-width:0}.stat strong{font-size:20px}.brand small{display:none}}@media(max-width:480px){.stats{gap:5px}.stat{padding:10px}.stat span{font-size:9px}.overview h1{font-size:26px}.sidebar{padding:13px}.header-actions #connectBtn{font-size:11px}.header-actions #logoutBtn{display:none}}

.vtable-viewport{width:100%;height:535px;min-height:320px;background:#fff;border-top:1px solid #e7eaf0;overflow:hidden}
.vtable-viewport.hidden{display:none}
#htmlGridFallback.hidden{display:none}
@media(max-width:680px){.vtable-viewport{height:470px;min-width:280px}}
.mail-explorer{margin:16px 24px 30px;padding:18px;background:#fff;border:1px solid #e2e8f0;border-radius:14px}
.mail-explorer.hidden,.mail-detail.hidden,#moreEmails.hidden{display:none}
.mail-search-controls{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.mail-search-controls input,.mail-search-controls select{padding:11px 12px;border:1px solid #cfd9e4;border-radius:9px;min-width:160px;flex:1;font-size:14px}
.mail-result{display:block;width:100%;text-align:left;padding:13px 4px;border:0;border-bottom:1px solid #e5e9ef;background:transparent;cursor:pointer;color:#20304c}
.mail-result strong{display:block;margin-bottom:4px;font-size:14px}
.mail-result span{display:block;color:#62738d;font-size:12px}
.mail-detail{margin-top:15px;padding:16px;border-radius:10px;background:#f5f7fb;border:1px solid #e1e6f1}
.mail-detail pre{white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.6 system-ui;color:#32425c;max-height:450px;overflow:auto}
@media(max-width:600px){.mail-explorer{margin:12px 8px;padding:12px}.mail-search-controls{flex-direction:column}}

/* Contact cards: full-feature alternative to the existing VTable grid. */
.view-switch{display:flex;gap:4px;padding:3px;background:#f2f5fb;border-radius:9px}
.view-switch .button{border:0;background:transparent;border-radius:7px}
.view-switch .button.selected{background:#fff;color:#254b9e;box-shadow:0 1px 3px #0002}
.contact-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;padding:18px}
.contact-card{background:#fff;border:1px solid #dfe6f2;border-radius:14px;padding:17px;min-width:0;
  display:flex;flex-direction:column;gap:12px;box-shadow:0 3px 15px rgba(23,38,70,.04)}
.contact-card:hover{border-color:#a1b4d7;box-shadow:0 6px 20px rgba(23,38,70,.08)}
.card-top{display:flex;align-items:center;gap:12px;min-width:0}
.card-top .avatar{flex-shrink:0}.card-top>div:last-child{min-width:0}
.card-top .contact-name{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.card-top .contact-email{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-company{font-weight:650;font-size:13px;color:#344968}
.card-categories,.contact-card .tag-cell{display:flex;gap:6px;flex-wrap:wrap}
.card-categories .chip{background:#eaf2ff;color:#224880}
.card-bottom{display:flex;justify-content:space-between;color:#708095;border-top:1px solid #eef1f6;
  padding-top:12px;font-size:12px}
.card-open{align-self:flex-start;margin-top:auto}
@media(max-width:740px){.contact-cards{grid-template-columns:1fr;padding:10px}.view-switch{order:1}}