@font-face{font-family:Inter;src:url('../fonts/inter-latin.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
:root{--bg-void:#080808;--bg-base:#0c0c0c;--bg-surface:#111;--bg-elevated:#1c1c1c;--bg-hover:#242424;--border:#2a2a2a;--text:#ccc;--bright:#e4e4e4;--secondary:#a0a0a0;--gold:#f0b45b;--rose:#e05263}
html.dark-mode,html.dark-mode body{background:var(--bg-void);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;-webkit-font-smoothing:antialiased}
body,input,button,select,textarea{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif}
html,body,#layout{min-width:320px}
#layout{height:100dvh}
html.dark-mode a{color:var(--bright)}
html.dark-mode a:hover{color:var(--gold)}
html.dark-mode :is(#layout-menu,#layout-sidebar){background:var(--bg-base);border-color:var(--border)}
html.dark-mode :is(#layout-list,#layout-content){background:var(--bg-surface);border-color:var(--border)}
html.dark-mode #layout>div>.header,html.dark-mode #layout>div>.footer{background:var(--bg-base);border-color:var(--border);color:var(--bright);font-weight:500}
html.dark-mode :is(.searchbar,.input-group-text,.popover-header,.formcontent){background:var(--bg-surface);border-color:var(--border);color:var(--text)}
html.dark-mode :is(.form-control,.custom-select,.recipient-input,.tagedit-list){background:var(--bg-elevated);border-color:var(--border);color:var(--bright);border-radius:6px}
html.dark-mode .form-control:focus,html.dark-mode .custom-select:focus{background:var(--bg-elevated);border-color:var(--gold);color:var(--bright);box-shadow:0 0 0 2px #f0b45b22}
html.dark-mode input::placeholder,html.dark-mode textarea::placeholder{color:var(--secondary);opacity:1}
html.dark-mode :is(button,a,input,select,textarea):focus-visible{outline:2px solid var(--gold);outline-offset:3px}
html.dark-mode .btn-primary{background:var(--bright);border-color:var(--bright);color:var(--bg-void);font-weight:600;border-radius:6px}
html.dark-mode .btn-primary:hover,html.dark-mode .btn-primary:focus{background:var(--gold);border-color:var(--gold);color:var(--bg-void)}
html.dark-mode .btn-secondary{background:var(--bg-elevated);border-color:var(--border);color:var(--bright);border-radius:6px}
html.dark-mode :is(.listing li,.listing td,.listing tr,.listbox,.uibox,.popover,.popupmenu,.ui-dialog,.ui-widget-content){border-color:var(--border)}
html.dark-mode :is(.popover,.popupmenu,.ui-dialog,.ui-widget-content){background:var(--bg-elevated);color:var(--bright)}
html.dark-mode .listing li>a{color:var(--text);border-color:var(--border)}
html.dark-mode :is(.listing li.selected>a,.listing li>a:hover,.listing tr.selected>td,.listing tr.focused>td){background:var(--bg-hover);color:var(--bright)}
html.dark-mode :is(#taskmenu a.selected,#taskmenu a:hover){background:var(--bg-elevated);color:var(--gold)}
html.dark-mode #taskmenu a.compose{color:var(--gold)}
html.dark-mode #mailboxlist li.selected>a{box-shadow:inset 2px 0 var(--gold);background:var(--bg-elevated)}
html.dark-mode :is(.listing .count,.listing .unreadcount){background:var(--bg-hover);color:var(--gold)}
html.dark-mode .messagelist tr td{border-color:#1e1e1e;background:var(--bg-surface);color:var(--text)}
html.dark-mode .messagelist tr.unread td{color:var(--bright)}
html.dark-mode .messagelist tr:hover td{background:#161616}
html.dark-mode .messagelist td.subject :is(.fromto,.date,.size){color:var(--secondary)}
html.dark-mode #messagelist .fromto,html.dark-mode #messagelist .date{color:var(--secondary);font-size:13px;font-weight:400}
html.dark-mode #messagelist .date{width:auto;max-width:112px;white-space:nowrap;overflow:visible}
html.dark-mode #messagelist .msgicon.unread{color:var(--gold)}
html.dark-mode #messagelist tr.focused>td{background:#161616}
html.dark-mode #messagelist tr.selected>td{background:var(--bg-hover)}
html.dark-mode #layout .floating-action-buttons a{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background:var(--bright);color:var(--bg-void);border:1px solid var(--bright);border-radius:16px;box-shadow:0 6px 20px #0005}
#messagelist-header .task-menu-button{--mail-icon:url('../images/menu.svg')}
#messagelist-header .folders{--mail-icon:url('../images/folder.svg')}
#messagelist-header .refresh{--mail-icon:url('../images/refresh.svg')}
#messagelist-header .toolbar-menu-button{--mail-icon:url('../images/more.svg')}
.floating-action-buttons .compose{--mail-icon:url('../images/compose.svg')}
#messagelist-header :is(.task-menu-button,.folders,.refresh,.toolbar-menu-button):before,.floating-action-buttons .compose:before{font-size:0!important;content:'';width:20px;height:20px;margin:0;float:none;background:currentColor;mask:var(--mail-icon) center/20px no-repeat}
#messagelist-header :is(.task-menu-button,.folders,.refresh,.toolbar-menu-button){display:flex;align-items:center;justify-content:center}
html.dark-mode #messagelist-header .header-title{font-size:16px;letter-spacing:-.4px}
html.dark-mode :is(.header-summary,.header-headers,.header-links,#message-header){color:var(--text);border-color:var(--border)}
html.dark-mode #message-header .subject{font-weight:600;letter-spacing:-.035em;line-height:1.3;color:var(--bright)}
html.dark-mode :is(#messagebody,#composebody){font-size:16px;line-height:1.65}
html.dark-mode #composebodycontainer #composebody{background:var(--bg-surface);color:var(--bright);padding:56px 16px 16px;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;resize:none;border-color:var(--border)}
html.dark-mode .html-editor .editor-toolbar{height:44px;background:var(--bg-elevated);border-color:var(--border);padding:0 12px}
html.dark-mode .editor-toolbar a.mce-i-html{height:44px;min-width:44px;display:inline-flex;align-items:center;color:var(--secondary)}
.editor-toolbar a.mce-i-html:after{content:'Format';font:12px Inter,sans-serif;margin-left:8px}
html.dark-mode .recipient-input li.recipient{background:var(--bg-hover);border-color:var(--border);color:var(--bright)}
html.dark-mode .recipient-input.focus{border-color:var(--gold)}
html.dark-mode #compose-content :is(.form-control,.input-group-text){border-color:var(--border);background:var(--bg-elevated);color:var(--bright)}
html.dark-mode #compose-content :is(.form-control:focus,.form-control.focus){border-color:var(--gold)}
html.dark-mode #compose-content .recipient-input li:not(.input){background:var(--bg-hover);border-color:var(--border);color:var(--bright)}
html.dark-mode .toolbar a:not(.disabled){color:var(--text)}
html.dark-mode .toolbar a:not(.disabled):hover{color:var(--gold)}
html.dark-mode .toolbar a.send:not(.disabled){color:var(--gold)}
html.dark-mode #logo{opacity:1}
.synlogic-login{padding:40px 28px!important;overflow:auto!important;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:28px;background:var(--bg-void)!important;text-align:left!important}
.login-brand{display:flex;align-items:center;gap:12px;width:min(100%,384px);color:var(--bright);font-size:23px;font-weight:600;letter-spacing:-1px}
.brand-product{font-size:14px;font-weight:400;letter-spacing:0;color:var(--secondary);padding-left:14px;margin-left:4px;border-left:1px solid var(--border)}
.login-panel{width:min(100%,384px);padding:28px;background:var(--bg-surface);border:1px solid var(--border);border-radius:12px}
.login-panel h1{font-size:27px;font-weight:500;letter-spacing:-1px;line-height:1.2;color:var(--bright);margin:0 0 28px;text-align:left}
html.dark-mode .task-login #login-form{position:static;inset:auto;transform:none;width:100%;max-width:none;margin:0;padding:0}
.task-login #login-form :is(table,tbody,tr,td){display:block;width:100%;padding:0}
.task-login #login-form td.title{display:block!important;margin:0 0 9px;color:var(--secondary);font-size:13px;text-align:left}
.task-login #login-form td.input{position:relative;display:flex;margin-bottom:22px}
.task-login #login-form .input-group-prepend{display:none}
html.dark-mode .task-login #login-form input.form-control{width:100%;min-height:54px;padding:14px 16px;font-size:16px;line-height:24px;border-radius:6px;border-color:#3a3a3a}
html.dark-mode .task-login #login-form input.form-control:focus{border-color:var(--gold)}
.task-login #login-form input[type=password],.task-login #login-form #rcmloginpwd{padding-right:54px}
.task-login #login-form .formbuttons{margin:6px 0 0}
.task-login #login-form button[type=submit]{min-height:54px;margin:0;font-size:15px;text-transform:none!important}
.password-toggle{position:absolute;right:3px;top:4px;z-index:4;width:46px;height:46px;display:grid;place-items:center;border:0;border-radius:4px;background:none;color:var(--secondary)}
.password-toggle[aria-pressed=true]{color:var(--gold)}
.password-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}
.task-login #login-footer:empty{display:none}
.task-login #messagestack{position:fixed;top:max(16px,env(safe-area-inset-top));bottom:auto;right:16px;left:16px;height:auto;max-width:480px;margin:0 auto;pointer-events:none}
.task-login #messagestack>div{pointer-events:auto}
@media(max-width:767px),(pointer:coarse){
  html{font-size:15px}
  #layout{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
  #layout>div>.header{height:56px;min-height:56px;line-height:56px}
  #layout :is(.header a.button,.toolbar a,.menu a,.btn){min-height:44px;min-width:44px}
  #layout .header .button:before{font-size:20px}
  #layout :is(input.form-control,select.form-control,textarea.form-control,.recipient-input){font-size:16px;min-height:44px}
  #layout .searchbar{padding:8px 12px}
  #layout .searchbar input{font-size:16px}
  #mailboxlist li>a{min-height:48px;line-height:48px;padding-top:0;padding-bottom:0}
  .messagelist td.subject{padding-top:15px;padding-bottom:15px}
  #messagelist td.subject .fromto{max-width:calc(100% - 120px)}
  #message-header{padding:20px 16px}
  #message-header .subject{font-size:23px;overflow-wrap:anywhere}
  #message-content{padding:0 16px 24px}
  #compose-content>form{display:flex;flex-direction:column;height:100%;min-height:0}
  #composebodycontainer{display:flex;flex:1;min-height:80px}
  #composebody{height:100%;min-height:80px;flex:1}
  .action-compose #layout-content>.footer{align-items:center;gap:12px;padding:0 16px}
  .action-compose #layout-content>.footer .buttons a{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;min-width:124px;height:44px;line-height:1;padding:0 14px;flex:none}
  .action-compose #layout-content>.footer .buttons a:before{font-size:18px;line-height:1;width:18px;margin:0;float:none}
  .action-compose #layout-content>.footer .buttons{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}
  .action-compose #layout-content>.footer .buttons .inner{display:inline!important}
  html.dark-mode .action-compose #layout-content>.footer a.send{background:var(--bright);color:var(--bg-void);border-radius:6px;font-weight:600}
  html.dark-mode .action-compose #layout-content>.footer a.save{background:transparent;color:var(--text)}
  #layout .floating-action-buttons{bottom:calc(20px + env(safe-area-inset-bottom))}
  .synlogic-login{padding:28px max(20px,env(safe-area-inset-right)) 28px max(20px,env(safe-area-inset-left))!important;gap:24px}
  .login-panel{padding:24px}
  .login-panel h1{font-size:27px;letter-spacing:-1px}
}
@media(max-height:550px){.synlogic-login{justify-content:flex-start;gap:24px;padding-top:24px!important}.login-panel h1{margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media print{html.dark-mode,html.dark-mode body{background:#fff;color:#111}#messagebody{color:#111}}