.mail-title{display:flex;align-items:center;justify-content:space-between;margin:0 0 22px;gap:12px}.mail-title p{font-size:10px;color:#6d8097;letter-spacing:1.4px;margin:0 0 5px}.mail-title h1{font-size:30px;line-height:1.15;margin:0;color:#183351}.mail-workspace{display:grid;grid-template-columns:165px minmax(0,1fr);background:#fff;border:1px solid #dce5ef;border-radius:16px;overflow:hidden;min-height:460px;height:calc(100dvh - 210px);max-height:950px;box-shadow:0 10px 30px #18335108}.mail-folders{background:#f4f7fc;border-right:1px solid #e0e7f0;padding:25px 10px;display:flex;flex-direction:column;gap:4px}.mail-folder-label{font-size:10px;letter-spacing:1.6px;color:#7e8ba0;padding:0 12px;margin:0 0 14px}.mail-folder{display:flex;align-items:center;gap:9px;text-align:left;background:transparent;border:0;padding:12px 10px;border-radius:8px;color:#52657d;cursor:pointer;font:inherit;font-size:12px;width:100%}.mail-folder>span{width:18px;font-size:18px;text-align:center}.mail-folder b{font-weight:500;flex:1}.mail-folder small{font-size:10px}.mail-folder.active{background:#dce9fa;color:#1d4e91;box-shadow:inset 3px 0 #326fbd}.mail-folder.active b{font-weight:700}.mail-folder:hover{background:#e7eef8}.mail-folder-divider{height:1px;background:#dee6f1;margin:15px 10px}.mail-folder-note{margin-top:auto;padding:35px 10px 0;font-size:11px;color:#64809d}.mail-folder-note>span{color:#43896b;font-size:8px}.mail-folder-note p{font-size:11px;line-height:1.65;color:#8292a5}.mail-main{min-width:0;display:flex;flex-direction:column;min-height:0}.mail-toolbar{padding:20px 22px 14px;display:grid;grid-template-columns:minmax(140px,1fr) minmax(180px,260px);gap:14px 20px;border-bottom:1px solid #e4eaf1}.mail-toolbar-heading{display:flex;align-items:center;gap:12px}.mail-toolbar-heading h2{font-size:18px;margin:0}.mail-toolbar-heading>span{font-size:11px;color:#7c8ba0}.mail-account-field{font-size:10px;color:#75869c;display:flex;flex-direction:column;gap:4px}.mail-account-field select{width:100%;border:1px solid #dbe4ef;background:#fff;padding:8px;border-radius:7px;font-size:12px;color:#27415f}.mail-search-field{grid-column:1/-1;display:flex;align-items:center;gap:14px;background:#f4f7fb;border:1px solid #e2eaf4;border-radius:8px;padding:0 12px}.mail-search-field>span{font-size:11px;color:#70849e}.mail-search-field input{background:transparent;border:0;outline:0;min-width:0;width:100%;padding:11px 0;font:inherit;font-size:12px}.mail-search-field:focus-within{border-color:#6e9bd3;box-shadow:0 0 0 2px #e6effb}.mail-sync-line{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:10px;color:#8390a1;line-height:1.5}.mail-panes{display:grid;grid-template-columns:minmax(260px,.85fr) minmax(300px,1.15fr);min-height:0;flex:1}.mail-list{overflow:auto;border-right:1px solid #e1e8f1;min-width:0;background:#fff}.mail-row{display:block;width:100%;text-align:left;background:#fff;border:0;border-bottom:1px solid #edf1f6;padding:16px 18px;cursor:pointer;font:inherit;color:#263c56;line-height:1.5}.mail-row:hover{background:#f6f9fe}.mail-row.selected{background:#eaf2ff;box-shadow:inset 3px 0 #3675c2}.mail-row-line{display:flex;align-items:center;gap:9px;justify-content:space-between;margin-bottom:6px}.mail-row-line b{font-size:12px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mail-row-line time{white-space:nowrap;font-size:10px;color:#8191a7}.mail-row>strong{font-size:12px;font-weight:550;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px}.mail-snippet{font-size:11px;color:#8190a3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.mail-row-foot{display:flex;justify-content:space-between;gap:5px;margin-top:9px;font-size:9px;color:#8296b0}.mail-row-foot>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mail-row-foot>span:last-child{white-space:nowrap}.mail-reader{overflow:auto;min-width:0;background:#fff;position:relative}.mail-reader-empty{height:100%;min-height:250px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:35px;color:#8291a5}.mail-envelope{display:grid;place-items:center;border-radius:20px;width:78px;height:78px;background:#eff5ff;color:#779ac6;font-size:35px;margin-bottom:16px}.mail-reader-empty h2{font-size:18px;font-weight:500;color:#3b5472;margin:0 0 8px}.mail-reader-empty p{font-size:12px;line-height:1.8;max-width:240px}.mail-reader-empty small{font-size:10px;margin-top:22px;color:#9aa7b8}.mail-reader-top{padding:12px 20px;border-bottom:1px solid #edf1f5;display:flex;justify-content:space-between;align-items:center;gap:10px}.mail-reader-top>span{font-size:9px;letter-spacing:.8px;color:#8a9bb0}.mail-reader-top .mini{font-size:10px;padding:5px 8px}.mail-reader-content{padding:24px}.mail-reader-content h2{font-size:20px;line-height:1.45;margin:12px 0 22px;overflow-wrap:anywhere;color:#203b59}.mail-reader-tags .pill{font-size:10px}.mail-addresses{display:grid;grid-template-columns:60px minmax(0,1fr);gap:8px 10px;font-size:11px;line-height:1.6}.mail-addresses dt{color:#8a98aa}.mail-addresses dd{margin:0;overflow-wrap:anywhere;color:#4e627c}.mail-reader-actions{display:flex;gap:7px;flex-wrap:wrap;padding:16px 0 22px;border-bottom:1px solid #edf1f5}.mail-reader-actions .mini{font-size:10px;padding:8px 11px}.mail-reader-body{white-space:pre-wrap;font-size:13px;line-height:1.9;color:#364c67;padding:25px 0;overflow-wrap:anywhere}.mail-attachments{border-top:1px solid #e5ebf2;padding:16px 0}.mail-attachments h3{font-size:12px;margin:0 0 12px}.mail-attachments h3 span{color:#91a0b2;margin-left:5px}.mail-attachment{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid #dce6f3;border-radius:8px;text-decoration:none;color:#3b6699;margin:8px 0;background:#f8fbff}.mail-attachment>span{font-size:19px}.mail-attachment>div{flex:1;min-width:0}.mail-attachment b{font-size:11px;display:block;overflow-wrap:anywhere;font-weight:500}.mail-attachment small{font-size:10px;display:block;color:#8699af;margin-top:4px}.mail-attachment.unavailable{background:#fafbfc;border-color:#e8ecf1;color:#7f8da0}.mail-classification{font-size:11px;color:#7c8b9d;border-top:1px solid #e5ebf2;padding-top:16px}.mail-classification summary{cursor:pointer}.mail-list-empty{padding:35px 20px;text-align:center;font-size:12px;color:#8291a6}.mail-list-empty small{display:block;line-height:1.7;margin-top:10px}.mail-more{display:block;margin:16px auto;max-width:90%;font-size:11px}.mail-row:focus-visible,.mail-folder:focus-visible{outline:2px solid #3d7bc5;outline-offset:-3px}
@media(max-width:1150px){.mail-workspace{grid-template-columns:1fr}.mail-folders{flex-direction:row;flex-wrap:wrap;padding:10px;border-right:0;border-bottom:1px solid #e1e8f2;gap:4px}.mail-folder{width:auto;flex:1;padding:9px;font-size:11px;white-space:nowrap}.mail-folder-label,.mail-folder-note,.mail-folder-divider{display:none}.mail-folder[data-mail-tab=shared]{flex:0 1 auto}.mail-toolbar{padding:15px}.mail-reader-content{padding:19px}.mail-panes{grid-template-columns:minmax(240px,.85fr) minmax(280px,1.15fr)}}
@media(max-width:760px){.mail-title h1{font-size:25px}.mail-title .outline{font-size:11px;padding:8px}.mail-workspace{height:calc(100dvh - 160px);min-height:550px;border-radius:10px}.mail-folder{font-size:10px;gap:5px;flex:none;width:auto}.mail-folder>span{font-size:14px;width:12px}.mail-folder[data-mail-tab=shared]{width:100%;padding-top:6px;padding-bottom:6px}.mail-toolbar{grid-template-columns:1fr;gap:9px}.mail-toolbar-heading h2{font-size:16px}.mail-account-field{flex-direction:row;align-items:center;gap:12px}.mail-account-field select{flex:1;min-width:0}.mail-panes{display:block;overflow:hidden;position:relative}.mail-list,.mail-reader{height:100%;border:0}.mail-reader{display:none}.mail-workspace.has-selection .mail-reader{display:block}.mail-workspace.has-selection .mail-list{display:none}.mail-workspace.has-selection .mail-toolbar{display:none}.mail-reader-content{padding:20px}.mail-reader-top>span{font-size:8px}}

.mail-view .demo{display:none}