/* MHJC Comic mail UI — colors and components from wannexus/Vps.
 * Elastic parent layout and command bindings remain supplied by Roundcube.
 */
:root{--comic-pink:#ff6b9d;--comic-blue:#5bc0eb;--comic-yellow:#ffc75f;--comic-mint:#7dffb3;--comic-purple:#c780fa;--comic-ink:#20202c;--comic-paper:#fff5e6;--comic-muted:#8a818d}
body{font-family:ui-rounded,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:var(--comic-ink)}
body:not(.task-login){background:var(--comic-paper)}
button,a,input,select,textarea{touch-action:manipulation}
a:focus-visible,button:focus-visible{outline:3px solid #1889bb;outline-offset:3px}
.task-login .vps-brand-icon{background:none!important;border:0!important;box-shadow:none!important;transform:rotate(-7deg);width:78px;height:78px}
.task-login .vps-brand-icon img{width:78px;height:78px;max-width:none;max-height:none;padding:0}
.task-login #layout-content.vps-login-card{box-shadow:6px 6px 0 var(--comic-ink)}
.vps-brand-link{display:flex;align-items:center;gap:10px;color:var(--comic-ink)!important;text-decoration:none!important}
.vps-brand-wordmark{font-size:22px;font-weight:900;letter-spacing:-.7px;line-height:1.3;white-space:nowrap;text-align:left}
.vps-brand-wordmark small{display:block;font-size:9px;color:#9b8e8b;letter-spacing:1.1px;margin-top:4px;font-weight:650}
.vps-nav-user{background:var(--comic-purple);border:2px solid var(--comic-ink);border-radius:10px;box-shadow:2px 2px 0 var(--comic-ink);padding:8px 12px;font-weight:750;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:230px;transform:rotate(-1deg)}
.vps-user-dot{color:#fff;padding-right:6px;font-size:8px}
.vps-eyebrow{display:block;font-size:8px;color:#aa968b;font-weight:850;letter-spacing:1.6px;margin-bottom:7px}
.vps-page-intro h2{font-size:28px;letter-spacing:-.5px;font-weight:900;margin:0}
.vps-page-intro h2 span{color:var(--comic-yellow);-webkit-text-stroke:1px var(--comic-ink);display:inline-block;transform:rotate(12deg);font-size:28px}
.vps-page-intro p{font-size:11px;color:#968987;margin:9px 0 0}
.vps-mail-stats{display:flex;align-items:stretch;gap:16px}
.vps-stat-card{display:flex;align-items:center;justify-content:space-between;gap:22px;background:#fff;border:2.5px solid var(--comic-ink);box-shadow:3px 3px 0 var(--comic-ink);border-radius:13px;padding:13px 16px;min-width:150px;transform:rotate(-1deg)}
.vps-stat-card:nth-child(2){transform:rotate(1deg)}
.vps-stat-card:nth-child(3){transform:rotate(-.5deg)}
.vps-stat-card span{display:block;font-size:10px;font-weight:650;color:#8d7f87;white-space:nowrap}
.vps-stat-card strong{display:block;font-size:25px;line-height:1.2;margin-top:6px;font-weight:900;white-space:nowrap}
.vps-folder-stat strong{font-size:17px;max-width:130px;overflow:hidden;text-overflow:ellipsis;line-height:1.7}
.vps-stat-icon{display:grid;place-items:center;flex-shrink:0;width:37px;height:37px;border:2px solid var(--comic-ink);border-radius:10px;box-shadow:2px 2px 0 var(--comic-ink);font-size:23px;font-style:normal;font-weight:800;color:var(--comic-ink)}
.vps-stat-icon.blue{background:var(--comic-blue)}.vps-stat-icon.yellow{background:var(--comic-yellow)}.vps-stat-icon.mint{background:var(--comic-mint)}
.vps-write-wrap{padding:20px 16px 14px}
.vps-write-button{display:flex;justify-content:center;align-items:center;gap:9px;border:2.5px solid var(--comic-ink);border-radius:12px;box-shadow:3px 3px 0 var(--comic-ink);background:var(--comic-pink);color:var(--comic-ink)!important;font-size:14px;font-weight:850;line-height:1.5;padding:12px 10px;text-decoration:none!important;transition:transform .12s,box-shadow .12s}
.vps-write-button:before{content:'＋';font-size:19px;font-weight:900;line-height:1}
.vps-write-button:hover{background:#ff8eb5;transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--comic-ink)}
.vps-folder-note{margin:10px 15px 18px;padding:20px 12px 14px;background:#fff0ce;border:2px solid var(--comic-ink);border-radius:11px;position:relative;transform:rotate(-1deg)}
.vps-folder-note>span{position:absolute;right:7px;top:-15px;font-size:27px;color:var(--comic-yellow);-webkit-text-stroke:1px var(--comic-ink)}
.vps-folder-note strong{display:block;font-size:10px;font-weight:850;white-space:nowrap}
.vps-folder-note small{display:block;font-size:9px;color:#9a8972;margin-top:6px}
.vps-compose-intro{display:flex;align-items:center;gap:14px;padding:5px 0 24px;margin-bottom:20px;border-bottom:2px dashed #e6ddcf}
.vps-compose-intro h2{font-size:22px;font-weight:850;margin:0 0 7px}
.vps-compose-intro p{font-size:11px;color:var(--comic-muted);margin:0}
.vps-compose-emblem{display:grid;place-items:center;width:51px;height:51px;border:2px solid var(--comic-ink);border-radius:13px;box-shadow:3px 3px 0 var(--comic-ink);background:var(--comic-yellow);font-size:29px;transform:rotate(-7deg)}
/* Native form and popup components, with the repository's comic treatment. */
body:not(.task-login) .form-control,body:not(.task-login) .custom-select,body:not(.task-login) .recipient-input{border:2px solid #35313e;border-radius:9px;background:#fff;font-size:13px;color:var(--comic-ink)}
body:not(.task-login) .form-control:focus,body:not(.task-login) .custom-select:focus{border-color:var(--comic-ink);box-shadow:0 0 0 3px #c8ecff}
body:not(.task-login) .btn-primary{border:2px solid var(--comic-ink);border-radius:9px;background:var(--comic-blue);color:var(--comic-ink);font-weight:800;box-shadow:2px 2px 0 var(--comic-ink)}
body:not(.task-login) .btn-secondary{border:2px solid var(--comic-ink);border-radius:9px;background:#fff1cf;color:var(--comic-ink);font-weight:750;box-shadow:2px 2px 0 var(--comic-ink)}
body:not(.task-login) .popupmenu,body:not(.task-login) .popover,body:not(.task-login) .ui-dialog{border:2px solid var(--comic-ink);border-radius:12px;box-shadow:4px 4px 0 var(--comic-ink);background:#fff}
body:not(.task-login) .popupmenu .menu a:hover{background:#fff0d0;color:var(--comic-ink)}
#mailboxlist{padding:5px 13px}
#mailboxlist li{border:0!important;margin:0 0 8px}
#mailboxlist li>a{border:2px solid transparent;border-radius:10px;font-size:12px;font-weight:650;padding:9px 10px;color:#62586b;background:transparent;min-height:39px;line-height:1.7}
#mailboxlist li>a:before{font-size:16px;margin-right:11px;line-height:1.5}
#mailboxlist li.selected>a{background:var(--comic-blue)!important;border-color:var(--comic-ink);box-shadow:2px 2px 0 var(--comic-ink);color:var(--comic-ink)!important;font-weight:850}
#mailboxlist li>a:hover{background:#fff0d5}
#mailboxlist .unreadcount{border:1.5px solid var(--comic-ink);border-radius:6px;background:#fff!important;color:var(--comic-ink)!important;font-size:9px;line-height:1.5;min-width:20px;text-align:center;padding:0 4px}
#mailboxlist li.mailbox.drafts>a:before{color:#c28414}#mailboxlist li.mailbox.sent>a:before{color:#198c57}#mailboxlist li.mailbox.junk>a:before{color:#ad6a28}#mailboxlist li.mailbox.trash>a:before{color:#d35380}
#messagelist-content{background:#fff}
#messagelist{color:var(--comic-ink);border:0}
#messagelist tbody td{background:transparent;color:var(--comic-ink);border-color:#eee4d8;padding-top:17px;padding-bottom:17px}
#messagelist tbody tr:hover td{background:#fff5e6}
#messagelist tbody tr.selected td{background:#dff3ff!important;color:var(--comic-ink)!important}
#messagelist tbody tr.unread td{background:#fffcf6}
#messagelist tr.selected{border-left:4px solid var(--comic-blue)}
#messagelist td.subject span.subject a{font-size:13px;color:var(--comic-ink)}
#messagelist tr.unread td.subject span.subject a{font-weight:850}
#messagelist td.subject span.fromto{font-size:11px;font-weight:650;color:#857a88}
#messagelist td.subject span.date{font-size:10px;color:#9d929c}
#messagelist .flagged{color:#e5a327}
#messagelist .listing-info{color:#9a8c98;font-size:12px;background:#fffaf3}
#layout-list>.searchbar{border-bottom:1px solid #e8dfd2;background:#fffcf6;padding:11px 13px!important;min-height:61px;height:61px;position:relative}
#layout-list>.searchbar form{border:2px solid #d9d0c7;border-radius:10px;background:#fff;height:37px;line-height:33px;margin:0}
#layout-list>.searchbar form:before{height:33px;line-height:33px;top:0;left:10px;font-size:14px}
#mailsearchform{font-size:12px;color:var(--comic-ink);background:transparent!important;height:33px;min-height:33px;line-height:33px;padding:0 78px 0 33px!important;border:0;border-radius:10px;box-sizing:border-box}
#layout-list>.searchbar form:focus-within{border-color:var(--comic-ink);box-shadow:0 0 0 2px #d2effc}
#layout-list>.searchbar>a.button{top:13px;line-height:33px;height:33px}
#layout-list .pagenav{background:#fffaf2;border-top:1px solid #eadfd1;padding:4px 8px;font-size:10px;min-height:39px}
#layout-list .pagenav a{color:#6f6175}
#layout-list .pagenav .pagenav-text{font-size:10px;color:#8d7d8f}
#layout-content>.header .toolbar{display:flex;align-items:center;justify-content:flex-start;gap:5px}
#layout-content>.header .toolbar a{color:#564960;border-radius:7px}
#layout-content>.header .toolbar a:not(.disabled):hover{background:#fff0cb}
#layout-content>.header .toolbar a.disabled{opacity:.35}
#compose-headers{padding-bottom:12px}
#compose-headers label{font-size:12px;font-weight:750;color:#6f6174}
#compose-headers .form-group{margin-bottom:16px}
#compose-headers .input-group-text{border:2px solid #35313e;border-radius:8px;background:#fff5e6;color:#6f6174}
#compose-headers .recipient-input .input{background:transparent}
#composebody{border:2px solid var(--comic-ink);border-radius:11px;line-height:1.9;padding:18px;min-height:180px;resize:vertical}
#compose-content>.formbuttons{border-top:2px solid #e9dfd2;background:#fffaf3;padding:15px 24px!important;min-height:70px}
#compose-content>.formbuttons .send{background:var(--comic-pink)!important;min-width:135px;padding:10px 20px;font-size:13px;font-weight:850;border:2px solid var(--comic-ink);box-shadow:3px 3px 0 var(--comic-ink);border-radius:10px}
#compose-attachments{padding:20px 17px;background:#fffbf4;border-bottom:2px dashed #e6dac8}
#compose-attachments .upload-form{border:2px dashed #d3bf9e;border-radius:11px;background:#fff5df;padding:19px 12px;text-align:center}
#compose-attachments .upload-form .hint{font-size:10px;color:#9a856a}
#compose-attachments .btn.attach{font-size:11px;max-width:100%;margin-top:12px}
#compose-options{padding:18px 15px;font-size:11px}
#compose-options label{font-size:10px;color:#8f7b8b}
#compose-options select{font-size:10px;padding-left:7px;padding-right:18px;border-width:1.5px;border-radius:7px}
#compose-options .form-check .col-6{max-width:65%;flex:0 0 65%}
#compose-options .form-check .form-check{max-width:35%;flex:0 0 35%}
.attachmentslist li{border:1.5px solid #d6cbbb;border-radius:8px;margin-top:9px;background:#fff}
.vps-message-reader #message-header{padding-bottom:20px;margin-bottom:20px;border-bottom:2px dashed #e6dacb}
.vps-message-reader #message-header .subject{font-size:23px;font-weight:850;line-height:1.5;color:var(--comic-ink);margin-bottom:20px;overflow-wrap:anywhere}
.vps-message-reader #message-header>.header{background:#fff8ed;border:1.5px solid #e7dbc8;border-radius:12px;padding:13px}
.vps-message-reader #message-header .contactphoto{border-radius:11px;border:2px solid var(--comic-ink);background:var(--comic-yellow)}
.vps-message-reader #message-header .header-summary{font-size:12px}
.vps-message-reader #message-header .header-headers{font-size:11px;color:#857789}
.vps-message-reader #message-header .header-links a{font-size:10px;color:#7a638a}
.vps-message-reader #messagebody{font-size:14px;line-height:1.85;color:#36303d}
html.iframe .vps-message-reader{background:#fff}
html.iframe .vps-message-reader>.content{padding:26px 25px}
/* Full desktop: repository navbar + overview + three independent mail panels. */
@media(min-width:769px){
 html:not(.iframe) body:not(.task-login) #layout{display:grid;grid-template-columns:280px minmax(0,1fr);grid-template-rows:78px minmax(0,1fr);gap:18px;padding:0 23px 23px;background:var(--comic-paper);height:100dvh;overflow:hidden}
 html:not(.iframe) body:not(.task-login) #layout:has(>.vps-mail-overview){grid-template-rows:78px 105px minmax(0,1fr)}
 body:not(.task-login) #layout-menu.vps-topnav{grid-column:1/-1;grid-row:1;display:flex!important;align-items:center;width:calc(100% + 46px)!important;height:78px;min-height:78px;margin-left:-23px;padding:0 25px;background:#fff!important;border:0!important;border-bottom:3px solid var(--comic-ink)!important;position:relative;z-index:3;box-shadow:none;border-radius:0}
 #layout-menu.vps-topnav .popover-header{height:auto;min-height:0;padding:0!important;background:transparent!important;line-height:1.3;flex-shrink:0;margin-right:30px;display:block!important;border:0}
 #layout-menu.vps-topnav .popover-header .vps-brand-link{display:flex!important}
 #layout-menu.vps-topnav .popover-header>a.cancel{display:none!important}
 #layout-menu.vps-topnav .popover-header img{padding:0;max-width:none;width:57px;height:57px;max-height:none}
 #taskmenu{display:flex!important;align-items:center;gap:11px;width:100%;height:100%;flex-direction:row;padding:0;margin:0;white-space:nowrap;overflow:visible}
 #taskmenu .action-buttons,#taskmenu .special-buttons{position:static!important;display:flex;align-items:center;gap:8px;background:none;float:none;height:auto;padding:0;bottom:auto;top:auto}
 #taskmenu .special-buttons{margin-left:0}
 #taskmenu a{display:flex!important;align-items:center;justify-content:center;gap:8px;width:auto!important;height:auto!important;min-width:0;line-height:1.5!important;margin:0!important;padding:8px 12px!important;font-size:12px!important;font-weight:800;border:2px solid var(--comic-ink)!important;border-radius:10px!important;background:#fff;color:var(--comic-ink)!important;box-shadow:2px 2px 0 var(--comic-ink)}
 #taskmenu a:before{display:inline-block!important;float:none!important;margin:0!important;line-height:1.5!important;font-size:16px!important;width:auto!important;height:auto!important;text-align:center}
 #taskmenu a .inner{display:inline!important;font-size:11px;max-width:none!important;overflow:visible!important;white-space:nowrap}
 #taskmenu .action-buttons{width:auto!important;flex-shrink:0}
 #taskmenu a.selected.mail{background:var(--comic-blue)!important}
 #taskmenu a.compose{background:var(--comic-pink)!important}
 #taskmenu a.contacts.selected{background:var(--comic-yellow)!important}
 #taskmenu a.settings.selected{background:var(--comic-mint)!important}
 #taskmenu a:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--comic-ink);background:#fff5e6}
 #taskmenu a.compose.selected{transform:rotate(-2deg);background:var(--comic-pink)!important}
 #taskmenu .vps-nav-user{margin-left:auto}
 #taskmenu a.about{display:none!important}
 #taskmenu a.logout{background:#fff!important;font-size:11px}
 #taskmenu a.logout:before{font-size:13px!important}
 #layout>.vps-mail-overview{grid-column:1/-1;grid-row:2;display:flex;align-items:center;justify-content:space-between;min-width:0;gap:25px;padding:2px 0}
 html:not(.iframe) body:not(.task-login) #layout-sidebar,html:not(.iframe) body:not(.task-login) #layout-list,html:not(.iframe) body:not(.task-login) #layout-content{min-width:0!important;max-width:none!important;width:auto!important;height:auto!important;margin:0;border:2.5px solid var(--comic-ink)!important;border-radius:15px;box-shadow:4px 4px 0 var(--comic-ink);background:#fff;min-height:0;overflow:hidden}
 html:not(.iframe) body:not(.task-login) #layout-sidebar{grid-column:1;grid-row:2}
 html:not(.iframe) body:not(.task-login) #layout-list{grid-column:1;grid-row:2}
 html:not(.iframe) body:not(.task-login) #layout-content{grid-column:2;grid-row:2}
 html:not(.iframe) body:not(.task-login) #layout:has(>.vps-mail-overview)>#layout-sidebar,html:not(.iframe) body:not(.task-login) #layout:has(>.vps-mail-overview)>#layout-list,html:not(.iframe) body:not(.task-login) #layout:has(>.vps-mail-overview)>#layout-content{grid-row:3}
 html:not(.iframe) body:not(.task-login) #layout>div>.header{height:54px;min-height:54px;line-height:54px;background:#fff8e9;border-bottom:2px solid var(--comic-ink);padding:0 10px;align-items:center}
 html:not(.iframe) body:not(.task-login) #layout>.vps-topnav>.header{border:0}
 #layout-list>#messagelist-header{background:#fff1cf!important}
 #layout-list>#messagelist-header>.header-title{font-size:15px;font-weight:850;display:block!important;margin:0 10px;text-align:left;position:static;white-space:nowrap;flex:1}
 #layout-list>#messagelist-header>.toolbar{display:flex;align-items:center;justify-content:flex-end;width:auto;min-width:0;gap:0;margin-left:auto}
 #layout-list>#messagelist-header>.toolbar a{font-size:14px;padding:4px 6px;line-height:1.5;height:auto;min-height:0}
 #layout-list>#messagelist-header>.toolbar a:before{font-size:15px;margin:0;line-height:1.5;float:none}
 #layout-list>#messagelist-header>.toolbar a>.inner{display:none}
 #layout-list>#messagelist-header>.refresh{height:auto;line-height:1.5;padding:4px 6px;margin:0}
 #layout-list>#messagelist-header>.refresh{display:flex;align-items:center;gap:5px;white-space:nowrap}
 #layout-list>#messagelist-header>.refresh:before{height:auto;line-height:1;font-size:16px;margin:0}
 #layout-list>#messagelist-header>.refresh .inner{display:inline;font-size:10px}
 #layout-sidebar>.header .sidebar-menu{display:flex;align-items:center;justify-content:center;align-self:center;width:26px;height:32px;line-height:1;padding:0;margin:0}
 #layout-sidebar>.header .sidebar-menu:before{height:auto;line-height:1;margin:0;font-size:18px}
 #layout-sidebar>.header .header-title{font-size:11px;font-weight:800;text-align:left!important;margin:0 8px!important}
 #layout-sidebar>#folderlist-content{min-height:0;flex:1}
 #layout-sidebar>.footer{background:#fffaf3;border-top:1px solid #e7dbc8;font-size:10px}
 #layout .column-resizer{display:none!important}
 html:not(.iframe) body.action-compose #layout{grid-template-columns:minmax(0,1fr) 280px}
 html:not(.iframe) body.action-compose #layout>#layout-sidebar{grid-column:2;grid-row:2;display:flex!important}
 html:not(.iframe) body.action-compose #layout>#layout-content{grid-column:1;grid-row:2}
 .vps-compose-main>#compose-content>.formcontent{padding:25px 27px;overflow:auto}
 .vps-compose-main>.header #messagetoolbar{margin-left:auto}
 .vps-compose-main>.header .header-title{display:block!important;text-align:left!important;margin:0 10px!important;font-size:15px!important;position:static!important;flex:1}
 .vps-compose-main>.header #composestatusbar{display:none}
 .vps-compose-main>.header #messagetoolbar a .inner{display:inline;font-size:10px}
 .vps-compose-main>.header #messagetoolbar a:before{font-size:15px;line-height:1.5;margin-right:6px}
 .vps-compose-main>.header #messagetoolbar a{font-size:11px;padding:6px 8px;line-height:1.5}
 .vps-compose-main>.header #messagetoolbar .spacer{display:none}
 html:not(.iframe) body.action-show #layout:has(.vps-message-reader){grid-template-columns:minmax(0,1fr)}
 html:not(.iframe) body.action-show #layout>.vps-message-reader{grid-column:1;grid-row:2}
 .vps-message-reader>.frame-content{padding:28px 32px}
 html:not(.iframe) body.task-settings #layout:not(:has(#layout-list)){grid-template-columns:240px minmax(0,1fr)}
}
@media(min-width:1201px){
 html:not(.iframe) body.task-mail:not(.action-compose):not(.action-show) #layout{grid-template-columns:210px minmax(325px,.95fr) minmax(350px,1.15fr)}
 html:not(.iframe) body.task-mail:not(.action-compose):not(.action-show) #layout>#layout-sidebar{display:flex!important;grid-column:1}
 html:not(.iframe) body.task-mail:not(.action-compose):not(.action-show) #layout>#layout-list{display:flex!important;grid-column:2}
 html:not(.iframe) body.task-mail:not(.action-compose):not(.action-show) #layout>#layout-content{display:flex!important;grid-column:3}
 html:not(.iframe) body.task-addressbook #layout,html:not(.iframe) body.task-settings #layout:has(#layout-list){grid-template-columns:210px 280px minmax(0,1fr)}
 html:not(.iframe) body.task-addressbook #layout>#layout-list,html:not(.iframe) body.task-settings #layout>#layout-list{grid-column:2}
 html:not(.iframe) body.task-addressbook #layout>#layout-content,html:not(.iframe) body.task-settings #layout:has(#layout-list)>#layout-content{grid-column:3}
}
@media(min-width:769px) and (max-width:1200px){
 .vps-brand-wordmark{font-size:19px}.vps-brand-wordmark small{display:none}
 #layout-menu.vps-topnav .popover-header{margin-right:16px}
 #layout-menu.vps-topnav .popover-header img{width:48px;height:48px}
 #taskmenu{gap:8px}#taskmenu a{padding:8px 9px!important;gap:5px}#taskmenu .vps-nav-user{max-width:165px;font-size:10px;padding:8px}
 .vps-stat-card{min-width:125px;gap:15px;padding:11px 12px}.vps-mail-stats{gap:12px}.vps-stat-icon{width:32px;height:32px;font-size:20px}.vps-folder-stat{display:none}
 #layout>.vps-mail-overview{gap:15px}.vps-page-intro h2{font-size:25px}.vps-page-intro p{font-size:10px}
 html:not(.iframe) body:not(.task-login) #layout>.listbox:not(.selected){display:none}
 html:not(.iframe) body:not(.task-login) #layout>#layout-content{display:flex}
 html:not(.iframe) body.action-compose #layout{grid-template-columns:minmax(0,1fr) 255px}
 .vps-compose-main>#compose-content>.formcontent{padding:21px}
 .vps-compose-main>.header #messagetoolbar a.signature,.vps-compose-main>.header #messagetoolbar a.responses{display:none}
}
/* Phones retain Elastic's tested pane navigation and attachment dialogs. */
@media(max-width:768px){
 #layout>.vps-mail-overview{display:none!important}
 .vps-nav-user{display:none}
 .vps-brand-wordmark{font-size:18px}.vps-brand-wordmark small{display:none}
 #layout-menu .vps-topbrand img{width:43px;height:43px;max-width:43px;padding:0}
 html:not(.layout-phone) #layout-menu .vps-brand-wordmark{display:none}
 html:not(.layout-phone) #layout-menu .vps-brand-link{justify-content:center;padding:10px 0}
 html.layout-phone #layout-menu.vps-topnav{border:2px solid var(--comic-ink);border-radius:12px;box-shadow:4px 4px 0 var(--comic-ink);background:#fff;overflow:hidden}
 html.layout-phone #layout-menu .vps-brand-link{display:flex!important;gap:9px;flex:none}
 #taskmenu a{color:var(--comic-ink);font-weight:750}
 #taskmenu a.selected{background:var(--comic-blue)!important;border:2px solid var(--comic-ink)!important;border-radius:9px;box-shadow:2px 2px 0 var(--comic-ink)}
 #taskmenu a.compose{background:var(--comic-pink)!important;border:2px solid var(--comic-ink)!important;border-radius:9px;margin:6px!important}
 #layout-list>.header{background:#fff1cf!important;border-bottom:2px solid var(--comic-ink)!important}
 #layout-sidebar>.header{background:#fff5e6!important;border-bottom:2px solid var(--comic-ink)!important}
 #layout-list>.header>.vps-current-folder{font-weight:850;font-size:15px;margin:0!important;position:static}
 .vps-write-wrap{padding:15px}
 .vps-folder-note{display:none}
 #messagelist tbody td{padding-top:18px;padding-bottom:18px}
 #messagelist td.subject span.subject a{font-size:14px}
 .vps-compose-intro{padding:3px 0 18px;margin-bottom:18px}.vps-compose-intro h2{font-size:19px}.vps-compose-intro p{font-size:10px}
 .vps-compose-emblem{width:43px;height:43px;font-size:25px}
 #compose-content>.formcontent{padding:18px!important}
 #compose-content>.formbuttons{padding:13px 17px!important}
 #compose-headers label{font-size:11px}
 html.iframe .vps-message-reader>.content{padding:20px 17px}
 .vps-message-reader #message-header .subject{font-size:21px}
 .vps-message-reader #messagebody{font-size:14px}
 #mailboxlist{padding:12px 15px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media(max-height:820px){.vps-folder-note{display:none}}