450;500;550;600;650;700&display=swap');
:root{font-family:'DM Sans',system-ui,sans-serif;color:#20333d;background:#f6f8fa;font-synthesis:none;--teal:#087f70;--navy:#102c36;--border:#e5ebee;--muted:#72818a}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button{border:0;background:none;color:inherit}a{color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #32af9b;outline-offset:3px}button:disabled{cursor:default;opacity:.55}svg{width:20px;height:20px;flex-shrink:0;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}button svg{vertical-align:middle}h1,h2,h3,p{margin:0}button{font-size:14px}.app{display:flex;min-height:100dvh}.sidebar{width:250px;background:var(--navy);color:#b5c7cc;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;padding:30px 18px 0;z-index:20}.brand{font-size:22px;letter-spacing:-.8px;color:#fff;text-decoration:none;display:flex;align-items:center;gap:11px;margin:0 7px 32px;font-weight:650}.brandmark{display:grid;place-items:center;background:#1e4950;border-radius:10px;width:36px;height:36px;color:#77e1c7}.primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--teal);color:white;border:1px solid var(--teal);border-radius:9px;min-height:44px;padding:11px 17px;font-weight:600}.primary:hover{background:#096f64}.add-account{background:#83e4c9;color:#103e38;border:0;width:100%;margin-bottom:34px}.add-account:hover{background:#a1efd9}.nav-label,.account-heading{font-size:12px;font-weight:600;letter-spacing:1.2px;color:#839fa8;padding:0 12px}.nav-label{margin-bottom:12px}nav{display:grid;gap:5px}.nav-item{display:flex;align-items:center;gap:11px;padding:12px;border-radius:8px;width:100%;text-align:left;font-size:14px}.nav-item.active{color:#9bf0d7;background:#20434b}.nav-item:hover{background:#1a3b44}.nav-item .nav-count{margin-left:auto;font-size:12px;background:#294b53;padding:2px 7px;border-radius:5px;color:#d4e6e7}.account-heading{margin:31px 0 12px;display:flex;align-items:center;justify-content:space-between}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:36px;min-height:36px;border-radius:8px}.icon-button:hover{background:#82979d20}.account-list{overflow:auto;flex:1;min-height:60px;padding-bottom:15px;scrollbar-width:thin;scrollbar-color:#47636b transparent}.account-item{display:flex;align-items:center;text-align:left;gap:10px;width:100%;padding:10px 12px;border-radius:7px}.account-item.active,.account-item:hover{background:#20434b;color:white}.provider-mini{display:inline-grid;place-items:center;flex-shrink:0;width:25px;height:25px;border-radius:6px;font-size:12px;font-weight:700;background:#ffffff12;color:#d5e4e8}.account-item .account-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar-footer{display:flex;align-items:center;gap:9px;border-top:1px solid #ffffff16;margin-top:auto;padding:20px 0}.sidebar-footer strong{font-size:13px;font-weight:500;color:#edf5f6}.sidebar-footer small{display:block;font-size:12px;margin-top:3px}.demo-tag{font-size:10px;border:1px solid #42616a;padding:4px;border-radius:4px;letter-spacing:.5px;margin-left:auto}.main{margin-left:250px;flex:1;min-width:0}.topbar{height:88px;border-bottom:1px solid var(--border);background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 32px;gap:15px}.title-group,.top-right{display:flex;align-items:center;gap:12px}h1{font-size:24px;font-weight:650;letter-spacing:-.8px}.count-badge{background:#edf3f3;border-radius:7px;padding:3px 8px;font-size:13px;color:#60767e}.preview-label{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted)}.tiny-dot{width:6px;height:6px;border-radius:50%;background:#d79b40}.demo-banner{display:flex;align-items:center;gap:10px;background:#edf6f4;border-bottom:1px solid #dcebe7;padding:12px 32px;color:#40635b;font-size:13px;line-height:1.5}.demo-banner svg{width:17px;height:17px}.demo-banner strong{font-weight:600}.demo-banner button{margin-left:auto;text-decoration:underline;font-size:12px;white-space:nowrap}.mail-workspace{display:grid;grid-template-columns:minmax(305px,390px) minmax(0,1fr);height:calc(100dvh - 133px);min-height:560px}.message-column{background:#fff;border-right:1px solid var(--border);display:flex;flex-direction:column;min-width:0}.list-intro{padding:27px 24px 22px;display:flex;align-items:center;justify-content:space-between;gap:10px}.list-intro h2{font-size:20px;letter-spacing:-.5px;font-weight:600}.list-intro p{font-size:13px;margin-top:6px;color:var(--muted)}.inbox-symbol{display:grid;place-items:center;background:#eff6f4;color:#6b938a;width:40px;height:40px;border-radius:12px}.search{margin:0 24px 20px;background:#f6f8f9;border:1px solid var(--border);display:flex;align-items:center;gap:9px;padding:11px 12px;border-radius:8px;color:#8b9aa1}.search input{width:100%;border:0;background:none;outline:none;font-size:14px;color:#20333d;min-width:0}.search:focus-within{outline:2px solid #68b7a7;outline-offset:1px}.filter-row{display:flex;gap:6px;padding:0 24px 18px;flex-wrap:wrap}.filter-row button{font-size:13px;padding:7px 11px;border-radius:6px;color:#6e7d85}.filter-row button.selected{color:#087564;background:#e7f4ef;font-weight:600}.list-meta{display:flex;justify-content:space-between;padding:13px 24px;border-block:1px solid var(--border);color:#829098;font-size:12px}.messages{overflow:auto;flex:1}.message{position:relative;display:block;text-align:left;width:100%;padding:21px 24px;border-bottom:1px solid var(--border);border-left:3px solid transparent;background:white}.message:hover{background:#f6faf9}.message.active{background:#eff7f5;border-left-color:var(--teal)}.message-top{display:flex;gap:10px;align-items:center;margin-bottom:11px}.avatar{width:35px;height:35px;display:grid;place-items:center;flex-shrink:0;border-radius:11px;background:#e6edf9;color:#526e97;font-size:12px;font-weight:650}.avatar.user{background:#31505a;color:#edf5f6}.sender{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.time{font-size:12px;color:#86939a;margin-left:auto;white-space:nowrap}.unread-dot{display:inline-block;width:6px;height:6px;background:#079281;border-radius:50%;margin-left:6px;vertical-align:middle}.subject{font-size:14px;font-weight:550;line-height:1.4;margin-bottom:5px}.message.unread .subject{font-weight:700}.snippet{font-size:13px;line-height:1.55;color:#849099;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.message-bottom{display:flex;align-items:center;justify-content:space-between;gap:7px;margin-top:13px}.account-chip{font-size:11px;display:inline-flex;gap:5px;align-items:center;background:#ecf0f3;color:#627780;padding:3px 6px;border-radius:4px}.active .account-chip{background:#deeeea}.status{font-size:11px;padding:3px 7px;border-radius:5px;white-space:nowrap;background:#faf0df;color:#a1742b}.status.done{background:#e6f3eb;color:#418364}.status.waiting{background:#ecedfb;color:#7973ab}.reading-pane{background:#fafbfc;overflow:auto;min-width:0}.reader-toolbar{min-height:65px;padding:13px 30px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:8px}.toolbar-actions{display:flex;gap:8px;align-items:center}.secondary{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid #dce4e8;background:#fff;min-height:39px;padding:8px 12px;border-radius:7px;font-size:13px}.secondary:hover{background:#f1f6f5}.secondary svg{width:16px;height:16px}.reader-body{max-width:860px;padding:36px 38px;margin:auto}.reader-subject{font-size:25px;letter-spacing:-.7px;font-weight:600;line-height:1.4;margin:15px 0 26px}.reader-sender{display:flex;gap:12px;align-items:flex-start;border-bottom:1px solid var(--border);padding-bottom:25px}.reader-sender .avatar{width:42px;height:42px;font-size:14px}.sender-detail{flex:1;min-width:0}.sender-detail strong{font-size:14px;font-weight:600}.sender-detail p{font-size:12px;margin-top:4px;color:#80909a;overflow-wrap:anywhere}.sender-detail .recipient{margin-top:10px;font-size:13px}.reader-date{font-size:12px;color:#80909a;white-space:nowrap}.mail-body{font-size:16px;line-height:1.85;padding:30px 0;color:#445961;white-space:pre-wrap;overflow-wrap:anywhere}.attachment{display:flex;align-items:center;gap:12px;border:1px solid var(--border);padding:14px;border-radius:9px;background:white;text-align:left;margin-bottom:30px;max-width:290px;width:100%}.attachment svg{color:#bc7a66}.attachment strong{font-size:13px;display:block;font-weight:500}.attachment small{font-size:12px;color:#83939b}.reply-box{border:1px solid #dce5e7;border-radius:12px;background:white;overflow:hidden;margin-top:15px}.reply-head{display:flex;align-items:center;gap:8px;font-size:13px;color:#7a8b92;border-bottom:1px solid #eef1f3;padding:14px 17px}.reply-head strong{font-weight:500;color:#435b65;overflow-wrap:anywhere}.reply-box textarea{width:100%;resize:vertical;min-height:135px;border:0;outline:0;padding:18px;font-size:15px;color:#304c54;line-height:1.65;background:transparent}.reply-box:focus-within{border-color:#68b7a7;box-shadow:0 0 0 2px #68b7a718}.reply-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px 16px}.reply-footer small{font-size:11px;color:#8a989e}.reply-footer .primary{min-height:39px;font-size:13px;padding:9px 12px}.reply-note{margin-top:12px;font-size:12px;color:#7d8d94}.empty{padding:65px 28px;text-align:center;color:#7c8c92}.empty svg{width:38px;height:38px;color:#7fada2;margin-bottom:14px}.empty h3{font-size:18px;color:#36565f;margin-bottom:8px}.empty p{font-size:14px;line-height:1.7}.accounts-view{padding:32px;max-width:1300px}.accounts-heading{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:25px}.accounts-heading h2{font-size:25px;letter-spacing:-.7px}.accounts-heading p{margin-top:7px;color:var(--muted);font-size:14px}.accounts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}.account-card{background:white;border:1px solid var(--border);padding:20px;border-radius:12px;min-width:0}.card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:19px}.provider-logo{width:39px;height:39px;border-radius:10px;display:grid;place-items:center;font-size:14px;font-weight:700;background:#eef3f8;color:#416988}.account-card h3{font-size:16px;margin-bottom:6px}.account-card p{font-size:13px;color:var(--muted);overflow-wrap:anywhere}.card-footer{border-top:1px solid var(--border);margin-top:18px;padding-top:14px;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#80929a}.card-footer button{font-size:12px;color:#097f70;font-weight:600}.badge-demo{font-size:11px;padding:4px 7px;border-radius:4px;background:#f2f4f6;color:#84929a}dialog{border:0;box-shadow:0 30px 120px #0b2e3840;border-radius:18px;padding:32px;max-width:510px;width:calc(100% - 32px);color:#20333d;max-height:90dvh;overflow:auto}dialog::backdrop{background:#102c3680;backdrop-filter:blur(3px)}.dialog-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.5px;color:#7a9994}dialog h2{font-size:27px;letter-spacing:-.9px;margin-bottom:12px}dialog p{font-size:15px;line-height:1.7;color:#71858d;margin-bottom:20px}.steps{display:flex;gap:7px;margin:4px 0 24px}.steps span{height:4px;flex:1;border-radius:4px;background:#eaf0f1}.steps span.complete{background:#26a68d}.field{display:grid;gap:8px;margin:22px 0;font-size:14px;font-weight:500}.field input{border:1px solid #d5e1e4;border-radius:8px;padding:13px;min-height:48px;width:100%;outline:none}.field input:focus{border-color:#088574;box-shadow:0 0 0 3px #08857412}.field small{font-size:12px;color:#89979e;font-weight:400;line-height:1.5}.wizard-actions{display:flex;gap:10px;margin-top:27px}.wizard-actions .primary{flex:1}.provider-detected{display:flex;align-items:center;gap:12px;padding:16px;background:#f1f7f5;border:1px solid #dcebe6;border-radius:10px;margin:20px 0}.provider-detected strong{display:block;font-size:15px}.provider-detected small{font-size:12px;color:#6f8c83}.info-box{background:#f4f7f8;border-radius:9px;padding:17px;margin:18px 0;color:#57717b}.info-box strong{font-size:14px}.info-box p{font-size:13px;margin:7px 0 0}.error{color:#b74444!important;font-size:13px!important;margin-top:10px!important}.success-symbol{display:grid;place-items:center;width:60px;height:60px;border-radius:17px;background:#e7f6ef;color:#05836c;margin-bottom:20px}.success-symbol svg{width:30px;height:30px}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);padding:14px 22px;border-radius:10px;background:#183d46;color:#fff;box-shadow:0 8px 35px #16303b25;font-size:14px;z-index:100;opacity:0;pointer-events:none;transition:.2s;max-width:90vw;text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}.mobile-menu,.reader-back,.scrim{display:none}[hidden]{display:none!important}
@media(min-width:1600px){.mail-workspace{grid-template-columns:420px minmax(0,1fr)}.reader-body{padding-top:44px}}@media(max-width:1200px){.sidebar{width:220px;padding-inline:12px}.brand{font-size:20px;gap:8px}.main{margin-left:220px}.mail-workspace{grid-template-columns:320px minmax(0,1fr)}.reader-body{padding:25px}.reader-toolbar{padding:13px 20px}.reader-subject{font-size:22px}.reader-date{display:none}.reply-footer{align-items:flex-start;flex-direction:column}.topbar{padding-inline:24px}.demo-banner{padding-inline:24px}.message{padding-inline:19px}}@media(max-width:1000px){.sidebar{width:205px}.main{margin-left:205px}.mail-workspace{grid-template-columns:290px minmax(0,1fr)}.list-intro,.search,.filter-row{margin-inline:0}.list-intro{padding-inline:18px}.search{margin-inline:18px}.filter-row{padding-inline:18px}.reader-toolbar{padding:10px}.reader-toolbar>.status{display:none}.reader-toolbar .toolbar-actions{width:100%;justify-content:flex-end}.reader-body{padding:22px}.reply-head{font-size:12px}.preview-label{display:none}.demo-banner button{display:none}}@media(max-width:820px){.sidebar{transform:translateX(-100%);width:260px;transition:transform .2s}.menu-open .sidebar{transform:translateX(0)}.menu-open .scrim{display:block;position:fixed;inset:0;background:#0d273e77;z-index:19}.main{margin-left:0}.mobile-menu{display:flex}.topbar{height:72px;padding:0 15px}h1{font-size:22px}.demo-banner{padding:10px 18px;font-size:12px}.demo-banner svg{align-self:flex-start;margin-top:2px}.mail-workspace{height:calc(100dvh - 132px);min-height:500px;grid-template-columns:330px minmax(0,1fr)}.reader-body{padding:24px 20px}.accounts-view{padding:25px 18px}}@media(max-width:650px){.mail-workspace{display:block;height:auto;min-height:0}.message-column{border:0;min-height:calc(100dvh - 132px)}.reading-pane{display:none}.reading-open .message-column{display:none}.reading-open .reading-pane{display:block;min-height:calc(100dvh - 132px)}.reader-back{display:flex;flex-shrink:0}.reader-toolbar .toolbar-actions{width:auto}.reader-toolbar{position:sticky;top:0;background:#fafbfc;z-index:2;padding:12px 16px}.reader-body{padding:25px 22px}.list-intro{padding:25px 22px 18px}.search{margin-inline:22px}.filter-row{padding-inline:22px}.message{padding:20px 22px}.list-meta{padding-inline:22px}.reader-subject{font-size:24px}.mail-body{font-size:16px}.reply-footer{flex-direction:row;align-items:center}.reply-footer small{max-width:100px;line-height:1.5}.accounts-heading{align-items:flex-start;flex-direction:column}.accounts-grid{grid-template-columns:1fr}.reader-sender{padding-bottom:22px}dialog{padding:24px}.demo-banner strong{display:block}.demo-banner{align-items:flex-start}.top-right{gap:0}.title-group{gap:8px}.reader-toolbar .secondary{font-size:12px}.accounts-heading h2{font-size:24px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.account-chip,.status,.reply-footer small,.reply-note,.badge-demo{font-size:12px}.title-group{min-width:0}.title-group h1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.count-badge{flex-shrink:0}@media(max-width:820px){.sidebar{visibility:hidden}.menu-open .sidebar{visibility:visible}}