:root { --cc-paper: #fdfdfc; --cc-ink: #15191f; --cc-blue: #153de5; --cc-muted: #89909b; --cc-line: #e2e4e8; }
body { font-family: Arial, Helvetica, sans-serif; color: var(--cc-ink); }
body.task-login, .task-login #layout, .task-login #layout-content { background: var(--cc-paper); }
.task-login #layout-content { padding: 40px 24px; }
.task-login #logo { width: 240px; height: 44px; max-width: 100%; margin-bottom: 40px; }
.task-login #login-form { width: 340px; max-width: 100%; margin: 0 auto; }
.task-login #login-form::before { content: "Your inbox."; display: block; text-align: center; font-size: 38px; line-height: 1.2; letter-spacing: -1.7px; margin-bottom: 38px; }
.task-login .form-control { background: transparent; border: 0; border-bottom: 1px solid var(--cc-line); border-radius: 0; box-shadow: none; height: 52px; padding-left: 0; font-size: 15px; color: var(--cc-ink); }
.task-login .form-control:focus { border-color: var(--cc-blue); box-shadow: none; }
.task-login .input-group-text { background: transparent; border: 0; border-bottom: 1px solid var(--cc-line); border-radius: 0; color: var(--cc-muted); }
.task-login .btn-primary { background: var(--cc-blue); border-color: var(--cc-blue); border-radius: 3px; height: 48px; font-weight: 400; margin-top: 24px; text-transform: none; }
.task-login .btn-primary:hover { background: #1030b8; border-color: #1030b8; }
.task-login #login-footer { color: var(--cc-muted); margin-top: 30px; font-size: 12px; }
.task-login #login-form .formbuttons { margin-top: 0; }
.task-login .cc-mail-caption { letter-spacing: .01em; }
#layout-menu { background: var(--cc-paper); border-right: 1px solid var(--cc-line); }
#layout-menu .popover-header { background: var(--cc-paper); }
#taskmenu a { color: #626a77; }
#taskmenu a.selected, #taskmenu a:hover { color: var(--cc-blue); background: #f0f3ff; }
#layout-sidebar, #folderlist-content { background: var(--cc-paper); }
.listing li.selected > a, .listing tr.selected td { background: #edf1ff; color: var(--cc-ink); }
.btn-primary { background-color: var(--cc-blue); border-color: var(--cc-blue); }
a { color: var(--cc-blue); }
:focus-visible { outline: 2px solid var(--cc-blue); outline-offset: 3px; }
@media (max-width: 480px) { .task-login #logo { width: 235px; margin-bottom: 30px; } .task-login #login-form::before { font-size: 32px; margin-bottom: 28px; } }