html {
    --mail-bg: #E3E9F4;
    --mail-container: #FFFFFF;
    --mail-text: #333333;
    --mail-muted: #666666;
    --mail-border: #A3B8CC;
    --mail-header-a: #7CA1D3;
    --mail-header-b: #4A73A6;
    --mail-panel-head: #E1EAF4;
    --mail-panel-text: #1E3F66;
    --mail-sidebar-bg: #F2F6FB;
}
html[data-mail-theme="dark"] {
    --mail-bg: #121820;
    --mail-container: #1A232E;
    --mail-text: #E0E6ED;
    --mail-muted: #AAB8C7;
    --mail-border: #384858;
    --mail-header-a: #2C3E50;
    --mail-header-b: #1A252F;
    --mail-panel-head: #223143;
    --mail-panel-text: #A9C4E5;
    --mail-sidebar-bg: #263548;
}
body.task-login {
    display: block;
    min-height: 100vh;
    padding: 10px 0;
    background: var(--mail-bg) !important;
    color: var(--mail-text);
    font: 12px "Lucida Grande", Verdana, Arial, sans-serif;
}
body.task-login #layout {
    display: block;
    width: 980px;
    max-width: calc(100% - 24px);
    height: auto;
    min-height: 0;
    margin: 0 auto;
    overflow: visible;
    background: var(--mail-container);
    border: 1px solid var(--mail-border);
    box-shadow: 0 4px 15px rgba(0,0,0,.15);
}
body.task-login #layout-content {
    display: block;
    position: static;
    width: auto;
    min-height: 0;
    text-align: left;
    background: transparent;
}
#mail-shell { color: var(--mail-text); background: var(--mail-container); }
#mail-header {
    padding: 15px 20px;
    background: linear-gradient(to bottom, var(--mail-header-a), var(--mail-header-b));
    border-bottom: 2px solid var(--mail-border);
}
#mail-header h1 { margin: 0; color: #fff; font-size: 22px; font-weight: bold; letter-spacing: -1px; text-shadow: 1px 1px 2px rgba(0,0,0,.4); }
#mail-header p { margin: 4px 0 0; color: #E6EEF7; font-size: 10px; }
#mail-utility {
    min-height: 33px;
    padding: 6px 12px;
    overflow: hidden;
    background: var(--mail-panel-head);
    border-bottom: 1px solid var(--mail-border);
    font-size: 11px;
}
#mail-utility strong { color: var(--mail-panel-text); }
#mail-utility span { margin-left: 8px; }
.mail-theme-toggle {
    float: right;
    padding: 2px 6px;
    background: var(--mail-container);
    color: var(--mail-text);
    border: 1px solid var(--mail-border);
    border-radius: 3px;
    font: 10px "Lucida Grande", Verdana, Arial, sans-serif;
    cursor: pointer;
}
#mail-main { display: flex; align-items: stretch; min-height: 290px; }
#mail-sidebar { flex: 0 0 205px; padding: 10px; background: var(--mail-sidebar-bg); border-right: 1px solid var(--mail-border); }
#mail-content { flex: 1; min-width: 0; padding: 15px; }
#mail-content h2 { margin: 2px 0 10px; font-size: 20px; color: var(--mail-text); }
.mail-intro { margin: 0 0 17px; color: var(--mail-muted); line-height: 1.55; }
.mail-panel { margin-bottom: 10px; background: var(--mail-container); border: 1px solid var(--mail-border); }
.mail-panel-heading { padding: 5px 8px; color: var(--mail-panel-text); background: var(--mail-panel-head); border-bottom: 1px solid var(--mail-border); font-weight: bold; font-size: 11px; }
.mail-panel-body { padding: 9px; line-height: 1.5; }
.mail-nav a { display: block; padding: 4px 2px; }
.mail-mono { font: 11px Consolas, Monaco, monospace; overflow-wrap: anywhere; }
#mail-shell a { color: #315D91; }
html[data-mail-theme="dark"] #mail-shell a { color: #9FC7F5; }
.mail-settings { font-size: 11px; }
.mail-settings div { padding: 3px 0; }
.mail-settings strong { color: var(--mail-panel-text); }
.mail-settings .mail-service-note { margin-top: 7px; color: var(--mail-muted); }
#mail-footer { padding: 12px; text-align: center; font-size: 11px; color: var(--mail-muted); background: var(--mail-panel-head); border-top: 1px solid var(--mail-border); }
body.task-login #login-form { position: static; top: auto; width: 100%; max-width: none; margin: 0; text-align: left; }
body.task-login #login-form table,
body.task-login #login-form tbody,
body.task-login #login-form tr { display: block; width: 100%; }
body.task-login #login-form td.input { display: block; width: 100%; padding: 4px 2px; }
body.task-login #login-form .input-group { display: block; width: 100%; }
body.task-login #login-form .input-group-prepend { display: none; }
body.task-login #login-form input.form-control {
    display: block;
    width: min(360px, 100%) !important;
    height: 30px;
    padding: 4px 7px;
    border: 1px solid var(--mail-border);
    border-radius: 0;
    background: var(--mail-container);
    color: var(--mail-text);
    font: 11px "Lucida Grande", Verdana, Arial, sans-serif;
}
body.task-login #login-form .formbuttons { margin: 8px 2px 0; }
body.task-login #rcmloginsubmit {
    width: auto !important;
    padding: 5px 20px;
    border: 1px solid #7C98B8;
    border-radius: 4px;
    background: linear-gradient(to bottom, #DDE8F5, #B7CBE2);
    color: #1E3F66;
    font: bold 11px "Lucida Grande", Verdana, Arial, sans-serif;
    text-transform: none !important;
}
body.task-login #rcmloginsubmit:hover { background: linear-gradient(to bottom, #EAF3FF, #9FBFE5); }
body.task-login #login-footer { display: none; }
@media (max-width: 650px) {
    #mail-main { display: block; }
    #mail-sidebar { border-right: 0; border-bottom: 1px solid var(--mail-border); }
    #mail-content { padding: 15px; }
    .mail-theme-toggle { float: none; display: block; margin-top: 7px; }
}